以下提供三种React内函数的写法,都可以正常运行,有疑问可以留言
写法一:让函数内部的this指向这个类的实例,它是用bind实现的,bind的第一个参数表示context,就是this。
//写法一 class ManageAddress extends React.Component { constructor(props) { super(props); this.handleChangeAddressType = this.handleChangeAddressType.bind(this)
... } /** * 切换地址类型,重新获取地址列表 * @param key */ handleChangeAddressType(key) { ... }; render() { return ( ... <button onClick={this.handleChangeAddressType}>测试 </button > ... ) }
}
写法二:相当于让handleChangeAddressType的值为一个箭头函数,所以调用处直接传入这个值就可以,注意不能加括号会报错。而箭头函数的特性我们都知道:它不会自己创建this,它会从自己的作用域链上层继承this,这里this就会指向这个类的实例。这不是js标准写法,但是babel已经支持了。
//写法二 class ManageAddress extends React.Component { constructor(props) { super(props); ... } /** * 切换地址类型,重新获取地址列表 * @param key */ handleChangeAddressType = (key) =>{ ... }; render() { return ( ... <button onClick={this.handleChangeAddressType}>测试 </button > ... ) } }
写法三:在调用处使用箭头函数,与第二种方法类似
//写法三 class ManageAddress extends React.Component { constructor(props) { super(props); ... } /** * 切换地址类型,重新获取地址列表 * @param key */ handleChangeAddressType(key) { ... }; render() { return ( ... <button onClick={(key)=>this.handleChangeAddressType(key)}>测试 </button > ... ) } }