React中的事件绑定的四种方式

duanyuehuan2024-06-26 19:24

1.在构造函数中绑定事件

javascript 复制代码

 constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

2.在调用时显式绑定

javascript 复制代码

<button onClick={this.handleClick.bind(this)}>Click me</button>

3.使用箭头函数

javascript 复制代码

 handleClick = () => {
    console.log('Button clicked');
  };

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }

4.直接传入一个箭头函数

javascript 复制代码

<button onClick={() => this.handleClick("1"}>Click me</button>;