一、在constructor中bind绑定组件的this:
class Button extends React.Component{
constructor(pops){
super();
this.handleClick = this.handleClick.bind(this);
}
handleClick = () => {
console.log("this is ", this);
}
render(){
return (<button onClick={this.handleClick}>按钮</button>)
}
}
二、方法使用时绑定 this:
class Button extends React.Component{
constructor(props){
super(props);
}
handleClick = () => {
console.log("this is ", this);
}
render(){
return (<button onClick={this.handleClick.bind(this)}>按钮</button>)
}
}
ReactDOM.render(
<Button/>,
document.getElementById("app")
);
三、使用属性初始化语法:
class LoggingButton extends React.Component {
// 这个语法确保了 `this` 绑定在 handleClick 中
// 这里只是一个测试
handleClick = () => {
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}
四、在回调函数中使用 箭头函数:
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
// 这个语法确保了 `this` 绑定在 handleClick 中
return (
<button onClick={(e) => this.handleClick(e)}>
Click me
</button>
);
}
}