运行一下代码会报错,就是因为this指向的问题
import React, {Component} from 'react'
import { Button } from 'antd';
export default class Home extends Component {
constructor(props) {
super(props)
this.state = {
msg: 'first msg'
}
}
handleSetdata() {
// 这里的this是属于这个方法,不属于外部,所以无法调用到setState方法
this.setState({
msg: 'new data'
})
}
render() {
return (
<div>
<p>{this.state.msg}</p>
<Button type="primary" onClick={this.handleSetdata}>Primary</Button>
</div>
)
}
}
绑定事件处理函数this的几种方法:
1、在事件调用后面加上bind(this)
<Button type="primary" onClick={this.handleSetdata.bind(this)}>Primary</Button>
2、在构造函数中改变
constructor(props) {
super(props)
this.state = {
msg: 'first msg'
}
this.handleSetdata = this.handleSetdata.bind(this)
}
3、调用的方法,用es6箭头函数的形式声明,就不会存在this指向问题
handleSetdata = () => {
this.setState({
msg: 'new data'
})
}
react 事件调用方法传参问题
以下代码会报错:
handleSetdata不能直接使用传递参数
import React, {Component} from 'react'
import { Button } from 'antd';
export default class Home extends Component {
constructor(props) {
super(props)
this.state = {
msg: 'first msg'
}
}
handleSetdata = (val) => {
this.setState({
msg: val
})
}
render() {
return (
<div>
<p>{this.state.msg}</p>
<Button type="primary" onClick={this.handleSetdata('nea msg')}>Primary</Button>
</div>
)
}
}
正确写法
<Button type="primary" onClick={this.handleSetdata.bind(this, 'nea msg')}>Primary</Button>