使用 ES6 类的 React Component 中的 this 对象

Question

我有一个带有textarea 的MsgInput 组件，其中onKeyUp 触发了一个处理函数。在处理函数内部，我尝试使用this.props 读取道具，但不确定为什么此处未定义道具。当然，解决方法是使用this.handler.bind(this)。

export class MsgInput extends React.Component {
  constructor(props) {
        super(props);
  }

  inputHandler(e) {
    if(e.keyCode == 13 && !e.shiftKey) {
      this.props.onNewMessage({content: e.target.value});
      e.target.value = '';
      e.preventDefault();
    }
  }

  render() {
    return (
        <div className="controls">
            <textarea onKeyDown={this.inputHandler.bind(this)} className="msg-input" placeholder="Write something" disabled={!this.props.auth}></textarea>
        </div>
    );
  }
}

Answer 1

使用 ES6 类的 React 不会自动将您的回调绑定到组件实例，因此您必须像已经做的那样自己做。否则 this 在回调中将不可用。

---

this.inputHandler.bind(this)

这不是一个变通方法，而是它应该的方式。

另一种选择是使用 ES6 箭头函数，它会自动绑定 this。

<textarea onKeyDown={(e) => this.inputHandler(e)}></textarea>

---

警告：在 jsx 中使用 .bind 或箭头函数会在每次渲染时创建一个新函数，这会影响性能。

作为最后的手段，您可以在构造函数中绑定不会有箭头函数性能损失的方法。

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