我试图让按钮在 React.js 中增加一个值来学习两个组件之间的通信。一个组件只是一个显示 +1 的按钮，另一个组件是一个将在单击该按钮时递增的值。
我已经编写了这段代码，但无法找到为什么没有显示值。
注意:我只有一天的 React.js 经验。
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<script src="https://unpkg.com/jquery@3.1.0/dist/jquery.min.js"></script>
<script src="https://unpkg.com/remarkable@1.6.2/dist/remarkable.min.js"></script>
<script type="text/babel">
var Button = React.createClass({
render : function(){
return (
<button>+1</button>
)
}
});
var Counter = React.createClass({
render : function(){
return (<div>Hello {this.props.updValue}</div>);
}
});
var App = React.createClass({
getInitialState : function(){
return {count : 0 };
},
increment : function(){
this.setState({counter:this.state.count + 1});
},
render: function(){
return (
<div>
<Button onClick={this.increment} updValue={this.state.count}/>
<Counter />
</div>
);
}
});
ReactDOM.render(<App />,document.getElementById("root"));
</script>
</body>
</html>
( https://plnkr.co/edit/SVTfEc5jx5Q15B1c07GB )
编辑:从 Piotr Berebecki 的代码中学习后，我修改了现有代码以添加已创建 Click 的值。 https://plnkr.co/edit/VL5961FB0mrm4QlxuO9T
最佳答案
请查看此演示:http://codepen.io/PiotrBerebecki/pen/NRdAON以及下面的 React 代码。
我在您的代码中注意到的问题:
- 在您使用的
increment()函数中
this.setState({counter:this.state.count + 1});应该是this.setState({count:this.state.count + 1}); - 在
App呈现方法中，您使用了onClick事件。这应该在Button组件本身的 render 方法中。 - 您还需要一个从父项 (
App) 传递给子项 (Button) 的 Prop (为清楚起见，我将其命名为passClick) .Button然后可以在它的handleClick()方法中使用这个属性。然后App会调用increment()方法接收它。
react 代码:
var Button = React.createClass({
handleClick: function() {
console.log('1. Received click in Button');
this.props.passClick();
},
render: function() {
return (
<button onClick={this.handleClick} >+1</button>
)
}
});
var Counter = React.createClass({
render: function() {
return (<div>Hello {this.props.updValue}</div>);
}
});
var App = React.createClass({
getInitialState: function() {
return {
count: 0
};
},
increment: function() {
this.setState({
count: this.state.count + 1
});
console.log('2. Received click in App');
},
render: function() {
return (
<div>
<Button passClick={this.increment}/>
<Counter updValue={this.state.count}/>
</div>
);
}
});
关于javascript - 单击一个组件中的按钮不会改变 React.js 中其他组件的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39630543/