第一种:如果函数写在了render上面。就把this绑定到构造函数里面,
class App extends Component {
constructor(props) {
super(props)
this.state = {
soldiers : ['dad','father','mother']
}
/*绑定this到函数里面方式一*/
this.function_name = this.function_name.bind(this);
}
/*函数可以写在这里。render上面*/
addsoldier (){
this.setState({
soldiers: [...this.state.soldiers,'新兵'+Math.random()]
})
}
render(){}
第二种:直接绑定到要执行的onClick = {this.function_name.bind(this)}
里面。
<button onClick={this.addsoldier.bind(this)}>添加新兵</button>
第三种:在要执行的函数的地方写成箭头函数。
onClick = {()=>this.function_name()}
第四种:把函数直接写成箭头函数:
function_name = () =>{
console.log(00)
onClick = {this.function_name}
}
记录一种函数参数的传递:
addsoldier =(e)=>{
console.log(e);
this.setState({
soldiers: [...this.state.soldiers,'新兵'+Math.random()]
})
}
<button onClick={this.addsoldier.bind(this,'111')}>添加新兵</button>