Question

我有一个MsgInput组件，其中textarea onKeyUp触发了处理函数。在处理函数内部，我尝试使用this.props读取道具，但不确定为什么道具在这里未定义。当然，workaroud是使用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类进行反应并不会将回调自动绑定到组件实例，因此您必须自己完成此操作。否则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);
}

使用ES6类的React组件中的此对象

1 个答案: