获取错误无法读取未定义的属性“setState”

IT技术 reactjs react-redux
2021-04-03 05:32:03

我是 Reactjs 的新手。我正在尝试做一些非常简单的事情：当用户更改文本区域内的文本时，更新渲染函数内的 div。有什么建议？

class HTMLEditor extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {value: 'Put here HTML'};
  }
  
  
  handleChange(e) {
    this.setState({value: e.currentTarget.value});
  }
 
  
  render() {
    return (
      <div>
      <textarea defaultValue={this.state.value} onChange={ this.handleChange } />
        <div>{this.state.value}</div>
      </div>
    );
  }
}

ReactDOM.render(
  <HTMLEditor />, 
  document.getElementById('container')
);

1个回答

你应该绑定handleChange函数。您收到此错误是因为，在您的 handleChange 函数中，thiskeywork 并未引用 React 类的上下文，因此您需要绑定该函数。

看到这个答案 why do you need to bind event handlers in React

class HTMLEditor extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {value: 'Put here HTML'};
  }
  
  
  handleChange = (e) =>{
    this.setState({value: e.currentTarget.value});
  }
 
  
  render() {
    return (
      <div>
      <textarea defaultValue={this.state.value} onChange={ this.handleChange } />
        <div>{this.state.value}</div>
      </div>
    );
  }
}

ReactDOM.render(
  <HTMLEditor />, 
  document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

太好了，谢谢两位！！你能解释一下 this.handleChange = this.handleChange.bind(this) 与箭头函数之间的区别是什么，什么是更好的最佳实践？谢谢
2021-06-02 05:32:03
2021-06-18 05:32:03
其它你可能感兴趣的问题
上一篇函数后的 Javascript 中的冒号是什么意思？ 下一篇Next.js：如何从 getStaticProps 中获取静态资产