javascript - 将 onchange 事件监听器附加到文本区域

Question

我正在尝试将 onchange 事件监听器附加到文本区域，以使用新值更新其状态。

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

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属性，它就会起作用。

Answer 1

React.Component 不会将每个函数都绑定(bind)到 this。它仅将 this 与 React 的生命周期方法 绑定(bind)。

箭头函数:当您使用箭头函数时，该函数将自动绑定(bind)到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.
}