이것은 왜 컴포넌트 코드가 예상대로 반응하지 않습니까?

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> 
); 
};