为什么增加数量(模拟喜欢)的按钮不起作用？如何解决这个问题？

Question

我想做一个按钮，将右数增加 1(模拟喜欢(。我也想只用一个组件创建这个。但由于某种原因，代码不起作用。如何解决这个问题？

class Like extends React.Component {
state = {
like: 0,
}
plus() {
this.setState({
like: this.state.like + 1,
});
}
render() {
return (
<div>
<button onClick={this.plus}>click me</button>
{this.state.like}
</div>
);
}
}
ReactDOM.render(<Like />, document.getElementById('app'));

https://jsfiddle.net/vt2rwyse/10/

Answer 1

>这是因为在plus()函数中，this关键字是未定义的。您需要将其绑定到组件，以便它指向正确的上下文。或者，您可以使用具有词法绑定的箭头函数。

class Like extends React.Component {
state = {
like: 0,
}
plus = () => {
this.setState({
like: this.state.like + 1,
});
}
render() {
return (
<div>
<button onClick={this.plus}>click me</button>
{this.state.like}
</div>
);
}
}
ReactDOM.render(<Like />, document.getElementById('app'));

或者，您可以使用：

class Like extends React.Component {
constructor(props){
super(props)
this.state = {
like: 0
}
this.plus = this.plus.bind(this)
}
plus() {
this.setState({
like: this.state.like + 1,
});
}
render() {
return (
<div>
<button onClick={this.plus}>click me</button>
{this.state.like}
</div>
);
}
}
ReactDOM.render(<Like />, document.getElementById('app'));