将 onchange 事件侦听器附加到 textarea答案

【问题标题】：Attach an onchange event listener to a textarea将 onchange 事件侦听器附加到 textarea
【发布时间】：2018-11-12 08:36:27
【问题描述】：

我正在尝试将 onchange 事件侦听器附加到 textarea 以使用新值更新其状态。

这是使用内联函数的代码：

class Textarea extends React.Component {
  constructor(props){
    super(props);
    this.handleScroll = this.handleScroll.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.state = {value: ''};
  }


  handleChange(event){
    this.setState({value: event.target.value});
  }

  render(){
    //alert("textarea rendered");
    return (
      <textarea value={this.state.value} onChange={()=>{this.handleChange}}></textarea>
    );
  }
}

textarea 值不会随上面的代码更新，但如果我以以下方式替换 onChange，它会更新：

<textarea value={this.state.value} onChange={this.handleChange}></textarea>

如果我将 handleChange 函数更改为每次文本框中的值发生变化时发出警报，而不是更新状态，那么如果我从文本框中删除 value 属性，它就会起作用。

【问题讨论】：

()=>{this.handleChange} 正在创建一个新的内联函数，该函数将在调用时返回 this.handleChange 方法。如果您将function() { return this.handleChange }.bind(this) 作为实验，您可能会发现它更容易。你想给onChange一个函数，当事件发生时应该调用它，所以onChange={this.handleChange}更准确。
在调用箭头函数时，您需要执行onChange={()=>{ this.handleChange(); }} 才能真正调用您的方法。
另外你不必绑定内联函数。
@Bergi，他需要e.target.value 才能通过。所以应该是onChange={e => this.handleChange(e.target.value)}

标签： javascript reactjs ecmascript-6

【解决方案1】：

React.Component 不会将每个函数都绑定到this。它仅将 this 与 react 的 life cycle methods 绑定。

Arrow functions: 当您使用arrow functions 时，该函数将自动绑定到this。它的箭头函数功能。

但在您的第一次尝试中，您尝试了箭头函数() => { this.handleChange }，类似于

function () {
   this.handleChange; // this is not being called at all.
}

上面的语法实际上什么也没做。试试这个 (evt) => { this.handleChange(evt); } 类似于

function (evt) {
   this.handleChange(evt); // The event will get passed to the function here.
}

【讨论】：

他已经使用的bind 没有任何问题。实际上它比在构造函数中定义箭头函数要好得多，因为您可以使用原型方法正确继承。
@Bergi 感谢您的评论。我没有看constructor中的绑定。