Reactjs TextArea對象是隻讀而不是可變的

Question

我有一個TextArea對象，它不允許輸入新文本。最初我沒有使用構造函數就嘗試過了，但是當我嘗試調用我的變更方法時會得到一些區域，因爲它沒有綁定到this。添加構造函數來綁定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.state.text作爲值傳遞給您的textarea而不是this.props.text。

Answer 2

我找到了答案！

首先，我在render方法中使用this.props而不是this.state。所以，我的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) 
       ); 
      } 
     }