Reactjs TextAreaオブジェクトは可変ではなく読み込み専用です

Question

新しいテキストを入力できないTextAreaオブジェクトがあります。最初はコンストラクタなしでこれを試しましたが、thisにバインドされていなかったので、私がonメソッドを呼び出そうとするときに領域を取得します。 onChangeメソッドをバインドするコンストラクタを追加すると、テキストを入力できなくなります。

 class TextAreaCounter extends React.Component{ 
      constructor(props) { 
       super(props); 
       this._textChange = this._textChange.bind(this); 
      } 
      getInitialState() { 
       return { 
        text: this.props.text, 
       }; 
      } 
      _textChange(ev) { 
       this.setState({ 
        text: ev.target.value, 
       }); 
      } 
      render() { 
       return React.DOM.div(null, 
        React.DOM.textarea({ 
         value: this.props.text, 
         onChange: this._textChange, 
        }), 
        React.DOM.h3(null, this.props.text.length) 
       ); 
      } 
     } 
     TextAreaCounter.PropTypes = { 
      text: React.PropTypes.string, 
     } 
     TextAreaCounter.defaultProps = { 
      text: '', 
     } 
     ReactDOM.render(
      React.createElement(TextAreaCounter, { 
       text: "billy", 
      }), 
      document.getElementById("app") 
     ); 

Answer 1

this.step.textをthis.props.textではなくtextareaに渡す必要があります。

Answer 2

回答が見つかりました！

最初に、私はthis.stateの代わりにthis.propsをレンダリング方法で使用していました。したがって、私のonChangeメソッドは呼び出されましたが、実際には更新されませんでした。

次に、getIntialStateは廃止予定です。そのため、コンストラクタ内の状態オブジェクトに更新します。

 class TextAreaCounter extends React.Component{ 
      constructor(props) { 
       super(props); 
       this._textChange = this._textChange.bind(this); 
       this.state = { 
        text: this.props.text, 
       }; 
      } 
      _textChange(ev) { 
       this.setState({ 
        text: ev.target.value, 
       }); 
      } 
      render() { 
       return React.DOM.div(null, 
        React.DOM.textarea({ 
         value: this.state.text, 
         onChange: this._textChange, 
        }), 
        React.DOM.h3(null, this.state.text.length) 
       ); 
      } 
     }