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不会将每个函数都绑定到this。它仅将this与反应的life cycle methods绑定。

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

但是在您的第一次尝试中，您尝试了类似于{p>

() => { this.handleChange }

以上语法实际上不执行任何操作。试试这个function () { this.handleChange; // this is not being called at all. }，它类似于

(evt) => { this.handleChange(evt); }

将onchange事件侦听器附加到文本区域

1 个答案: