エラー取得未定義のプロパティ '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

あなたはhandleChange機能をバインドする必要があります。 handleChange関数this keyworkがReact Classのコンテキストを参照していないため、関数をバインドする必要があるため、このエラーが発生しています。

は、あなただけのコンポーネントに `handleChange`をバインドする必要が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>