挑战 React 第十六篇

上篇讲解找不到绑定的this，因此 setState 才会 undefined，此篇会讲解如何解决上述状况的四种方式。

目标

按了按钮，讯息改变

第一种方式

在render method里 event 事件方法绑定 this

handleClickMessage() {    console.log(this);    this.setState({      message: '讯息已改变'    })  }render() {    return (      <div>        <div>{this.state.message}</div>        <button onClick={this.handleClickMessage.bind(this)}>click</button>      </div>    )  }

找到此组件绑定的 this，因此可以呼叫 this.setState确认按了按钮，讯息改变

第二种方式

与第一种方式一样，只是改用 arrow function，因此可以看到 handleClickMessage 有 + 小括弧

 render() {    return (      <div>        <div>{this.state.message}</div>        <button onClick={() => this.handleClickMessage()}>click</button>      </div>    )  }

第三种方式

与第一种方式雷同，但绑定的方法改放在 constructor，最后结论会在说明差别在哪里。

import React, { Component } from 'react'class EventBind extends Component {  constructor(props) {    super(props)      this.state = {       message: '初始讯息'    }    // 在 constructor 绑定事件方法    this.handleClickMessage = this.handleClickMessage.bind(this);  }    handleClickMessage() {    console.log(this);    this.setState({      message: '讯息已改变'    })  }  render() {    return (      <div>        <div>{this.state.message}</div>        <button onClick={this.handleClickMessage}>click</button>      </div>    )  }}export default EventBind

第四种方式

事件处理的方法直接使用 arrow function

import React, { Component } from 'react'class EventBind extends Component {  constructor(props) {    super(props)      this.state = {       message: '初始讯息'    }  }    // 方法直接使用 arrow function  handleClickMessage = () => {    console.log(this);    this.setState({      message: '讯息已改变'    })  }  render() {    return (      <div>        <div>{this.state.message}</div>        <button onClick={this.handleClickMessage}>click</button>      </div>    )  }}export default EventBind

结论

第一种与第二种方法都放在 render 里面，若有需要 rerender 重新渲染 的情况，可能会有效能上的问题。但第一种与第二种方式可以有弹性的将参数传给 Event Handler。以下举例为传送参数 id：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button><button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

第三种与第四种是我们组内常会使用的方式，因为放在 constructor 所以只会呼叫一次，不像第一二种可能在较複杂的情况会有效能的问题。

我还在学习的阶段，若有写错的讯息，都可以直接留言告知感谢!!!