reactjs - 出现错误无法读取未定义的属性 'setState'

Question

我是 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')
);

Answer 1

您应该绑定(bind) handleChange功能。您收到此错误是因为，在您的 handleChange 函数中 this keywork 不引用 React 类的上下文，因此您需要绑定(bind)该函数。

在 上查看此答案 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>