如何解決this.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

您需要綁定this給你的函數handleNewName。

在你的構造做：

class Greeter extends React.Component { 

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