この問題を解決するにはsetStateは関数ではありませんエラー

Question

私はReact.jsを学び、名前を取得して画面に表示する非常に基本的なネストされたコンポーネントの例を作成したいと思います。私はページをリフレッシュするとページの内容を見ることができますが、ページに名前を付けると、this.setStateは関数エラーではありません。これをどうすれば解決できますか？

これは私のコードです：

class GreeterMessage extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      name: this.props.name, 
      message: this.props.message 
     }; 
    } 

    static get defaultProps() { 
     return { 
      name: 'Milad', 
      message: 'Simple React App' 
     }; 
    } 

    render() { 
     var name = this.state.name; 
     var message = this.state.message; 
     return (
      <div> 
       <h1>Hello {name}!</h1> 
       <p>{message}</p> 
      </div> 
     ); 
    } 
}; 

class GreeterForm extends React.Component { 

    constructor(props) { 
     super(props); 
     this.onButtonClick = this.onButtonClick.bind(this); 
    } 

    onButtonClick(event) { 
     event.preventDefault(); 
     var name = this.refs.name.value; 
     this.props.onNewName(name); 
     this.refs.name.value = ''; 
    } 

    render() { 
     return (
      <div> 
       <input type="text" ref="name" /> <br/><br/> 
       <input type="button" value="Set Name" onClick={this.onButtonClick} /> 
      </div> 
     ); 
    } 

}; 

class Greeter extends React.Component { 

    constructor(props) { 
     super(props); 
    } 

    handleNewName(name) { 
     this.setState({ 
      name: name, 
     }); 
    } 

    render() { 
     return (
      <div> 
       <GreeterMessage /> 
       <GreeterForm onNewName={this.handleNewName} /> 
      </div> 
     ); 
    } 
}; 

ReactDOM.render(
    <Greeter />, 
    document.getElementById('app') 
); 

Answer 1

あなたは、あなたの関数handleNewNameにthisをバインドする必要があります。あなたのコンストラクタで

は行います

class Greeter extends React.Component { 

    constructor(props) { 
     super(props); 
     this.handleNewName = this.handleNewName.bind(this); 
    }