react 函数定义方式与组件 props 的相爱相杀

244 阅读1分钟

写法一: 函数内部的 this 指向这个类

class index extends Component {
    handleData(e){}
}

不适用

父组件中定义的需要通过 props 传递给子组件的函数

写法二: 写法一 + 在调用处使用箭头函数

优点

当函数调用需要传参时,我们在绑定函数的调用时就不能在只写onClick = {changeData},而要写onClick = {changeData(event)},这样一来点击事件触发的就是函数changeData的返回值,所以需要传参时,我们通常需要写高阶函数

在调用处使用箭头函数可以避免在函数定义时写高阶函数的复杂写法

handleData (event){
    this.props.a(e.target)
}
render() {
    return (
        <div>
            <input type="text" onKeyUp={(e)=>this.handleData(e)} />
        </div>
    );
}

写法三 箭头函数定义

懒得写了。。。