闲来无事,又重新看了一遍react的官网,趁机整理一些
在 JavaScript 中,class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick,当你调用这个函数的时候 this 的值为 undefined。有以下几种可以解决这种情况
import React, { Component } from "react";
export default class Event extends Component {
constructor() {
super();
this.state = {
demo1: "确认",
demo2: "确认",
demo3: "确认",
demo4: "确认",
demo5: "5",
demo6: "6",
};
//方法一:在此处绑定this
this.handleClick1 = this.handleClick1.bind(this);
}
handleClick(key, value) {
this.setState({
[key]: value,
});
}
//方法二:采用箭头函数
handleClick1 = () => {
this.handleClick("demo1", "取消");
};
handleClick2 = () => {
this.handleClick("demo2", "取消");
};
handleClick3() {
this.handleClick("demo3", "取消");
}
handleClick4() {
this.handleClick("demo4", "取消");
}
deleteRow(val) {
console.log("删除的数据",val);
}
render() {
const { demo1, demo2, demo3, demo4, demo5, demo6 } = this.state;
return (
<div>
<button onClick={this.handleClick1}>{demo1} </button>
<button onClick={this.handleClick2}>{demo2} </button>
//方法三:在DOM中采用箭头函数
<button onClick={() => this.handleClick3()}>{demo3} </button>
//方法四:改变this指向
<button onClick={this.handleClick4.bind(this)}>{demo4} </button>
{/* 给事件传递参数 */}
//方法一:箭头函数
<button onClick={() => this.deleteRow(demo5)}> 删除 </button>
//方法二:改变this指向
<button onClick={this.deleteRow.bind(this, demo6)}> Delete Row </button>
</div>
);
}
}