因为在jsx语法中,没办法获取构造函数中的真实this
1. 在constructor里面可以绑定,例如:
constructor(){
this.xxx = this.xxx.bind(this);
}
2. 在调用的时候可以绑定,例如:
onClick= {this.xxx.bind(this)}
3. 在调用的时候,换一种写法, 例如:
onClick = { () => this.xxx()}
代码用例:
import React, { Component } from 'react';
class App extends Component {
constructor() {
super();
this.aa = 'aaaaa'
this.state = {
number: 0,
xIsNext: true,
};
this.addNumber = this.addNumber.bind(this);
this.subtractionNumber = this.subtractionNumber.bind(this);
}
addNumber() {
this.setState({number: this.state.number+1})
}
subtractionNumber(){
this.setState({number: this.state.number-1})
}
render() {
return (
<div className="App">
<p>react加减系统啊</p>
{this.state.number}
<button onClick={this.addNumber}>加号</button>
<button onClick = { () => this.subtractionNumber()}>减号</button>
</div>
);
}
}
export default App;