Reactjs TextArea-Objekt ist nur lesbar anstelle von veränderbar

Question

Ich habe ein TextArea-Objekt, das die Eingabe von neuem Text nicht zulässt. Anfangs hatte ich das ohne den Konstruktor versucht, aber ich würde Bereiche bekommen, wenn ich versuchen würde, meine on change-Methode aufzurufen, weil sie nicht an this gebunden war. Das Hinzufügen des Konstruktors zum Binden der onChange-Methode verbietet die Eingabe von Text.

 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

Sie sollten this.state.text als Wert an Ihre Textarea anstelle von this.props.text übergeben.

Answer 2

Ich fand die Antwort!

Zuerst verwendete ich this.props anstelle von this.state in der Render-Methode. Also, meine OnChange-Methode wurde aufgerufen, aber nie wirklich aktualisiert.

Zweitens ist getIntialState veraltet, so dass ich auf ein Statusobjekt im Konstruktor aktualisieren.

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