react参数转递，以及返回函数绑定this

原创于 2020-06-22 14:49:57 发布 · 385 阅读

CC 4.0 BY-SA版权

文章标签：

本文详细解析了在React框架中如何通过按钮的点击事件来触发状态更新，包括如何正确绑定事件处理函数到组件实例，以及如何利用事件对象访问按钮的自定义属性。通过具体代码示例，阐述了在组件渲染时如何设置点击事件监听器，并在事件触发时读取data-index属性的值。

方法参数传递

记录：

render() {//渲染
    //console.log(this)
    return (
      <div>
        <button data-index='1' onClick={this.click0.bind(this)}>内容一</button>
        <button data-index='2' onClick={this.click0.bind(this)}>内容二</button>
        <div className='content'>
          <h1>显示内容：{this.state.content0}</h1>
        </div>
      </div>
    )
  };
  click0(e) {
    console.log('e:', e.target.dataset.index);
  }

1.其中，date-index为组件方法的赋值方式，接收为e.target，浏览器后台不能看到e.target的值，是因为他使用了代理的方式。
2.为什么要用.bind(this)，因为click0回调函数绑定的是click事件，不是改类的this对象，使用.bind(this)将该类的this绑定到click回调上，使click0方法可以调用this.setState方法修改属性的值。