これはなぜコンポーネントコードが反応しないのでしょうか？

Question

は予想：

1. 入力ボックスにテキストを変更するには、 メッセージにタイトルアップデートが大文字に変換されます。更新されたメッセージが

結果 コンソールに印刷されて送信ボタンを押してオン

：

1. は動作しません。コンソール 'this'のエラーは、textBoxChange関数では定義されていません。 （これは、レンダリング機能ではなくtextBoxChange機能で定義されているのか？）

Codepen：https://codepen.io/r11na/pen/qNKpQX

class App extends React.Component { 
    textBoxChange(e) { 
    this.props.text = e.target.value; 
    }; 

    sendMessage(e) { 
    console.log("Send message:" + this.props.text); 
    }; 

    render() { 
    return (
     <div> 
     <h3>Your Message: {this.props.text.toUpperCase()}</h3> 
     <MessageBox textBoxChange={this.textBoxChange} sendMessage={this.sendMessage} text={this.props.text}/> 
     </div> 
    ); 
    }; 
}; 

const MessageBox = (props) => { 
    return (
    <div className="row column"> 
     <textarea onChange={props.textBoxChange} value={props.text}></textarea> 
     <button onClick={props.sendMessage} className="button">Send</button> 
     <br/> 
    </div> 
); 
}; 

Answer 1

私は stateで propsを置き換え

、追加bind(this)方法と少しの変更：

class App extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { text: this.props.text }; 
    } 

    textBoxChange(e) { 
    this.setState({ text: e.target.value }); 
    }; 

    sendMessage(e) { 
    console.log("Send message:" + this.state.text); 
    }; 

    render() { 
    return (
     <div> 
     <h3>Your Message: {this.state.text.toUpperCase()}</h3> 
     <MessageBox 
      textBoxChange={this.textBoxChange.bind(this)} 
      sendMessage={this.sendMessage.bind(this)} 
      text={this.state.text} 
     /> 
     </div> 
    ); 
    }; 
}; 

const MessageBox = (props) => { 
    return (
    <div className="row column"> 
     <textarea onChange={props.textBoxChange.bind(this)} value={props.text}></textarea> 
     <button onClick={props.sendMessage.bind(this)} className="button">Send</button> 
     <br/> 
    </div> 
); 
};