为什么这些函数运行没有绑定…?

Question

单击按钮时，调用{this.increment}。为什么{this.increment}不绑定{this.increment.bind(this)}而运行

export default class App extends Component {

constructor(props) {
super(props)
this.state = {
count: 0
}
}

increment=()=>{
this.setState({ count: this.state.count + 2 })
}

render() {
return (
<>
<div id='1'>{this.state.count}</div>
<button onClick={this.increment}>Increment </button> 

</>
)
}
}

Answer 1

我想你对为什么需要绑定感到困惑． 它不是必需的，因为没有它函数将无法运行。您正在向onClick传递一个事件处理程序，它将在单击按钮时运行。

当运行这段代码:this.increment时，this是类的实例，因此是组件。但是赋值:onClick={this.increment}，执行如下操作:

class Animal {
constructor(name) {
this.name = name;
}
speak() {    console.log(`${JSON.stringify(this)}`);
}
}
let meth = ani.speak;
meth();

上下文丢失。this变成了undefined。所以即使increment运行，this.setState也会抛出错误。这就是为什么需要绑定。

在构造函数中添加以下语句:

this.increment = this.increment.bind(this)

现在你的增量被分配了一个新函数(一个新值)，其中this(context)的值是类实例。