reactjs不能修改綁定值

Question

我正在使用reactjs與父和子組件。在孩子中，我將textarea的值綁定到由父級發送的屬性。當我通過單擊「刪除」按鈕刪除子組件時，textarea的值與子組件的div上的內部html文本匹配，如預期的那樣。但是，由於textarea的值綁定到reactjs屬性，所以我無法修改文本區域的內容。

我希望能夠更改文本區域的值，保存並仍然正確刪除子組件。我敢肯定，這是簡單的東西，但我似乎無法推測出來......

//Child 
    var Comment = React.createClass({ 
     remove: function() { 
      this.props.deleteFromBoard(this.props.index) 
     }, 
     save: function() { 
      var val = this.refs.newText.value; 
      console.log('New Comment: ' + val); 
      this.props.updateCommentText(val, this.props.index); 
      this.setState({editing:false}) 
     }, 
     render: function() { 
      return (
       <div className="commentContainer"> 
        <div className="commentText">{this.props.myVal}</div> 
        <textarea ref="newText" 
          value={this.props.myVal} 
          onChange={this.handleChange}></textarea> 
        <button onClick={this.save} className="button-success">save</button> 
        <button onClick={this.remove} className="button-danger">Remove Question</button> 
       </div> 
      ); 
     } 
    }); 

    //Parent 
    var Board = React.createClass({ 
     //Initial state is an array with three different strings of text 'comments' 
     getInitialState: function(){ 
      return { 
       comments: [ 
        'One', 
        'Two', 
        'Three', 
        'Four' 
       ] 
      } 
     }, 
     removeComment: function(i){ 
      console.log('Removing comment: ' + i + ' bkbk'); 
      var arr = this.state.comments; 
      //Spicing the array (where do you want to start? 'i', how many do you want to remove? '1' 
      arr.splice(i,1); 
      this.setState({comments:arr}) 
     }, 
     reportMe: function(){ 
      var arr = this.state.comments; 
      var arrayLength = arr.length; 
      for (var i = 0; i < arrayLength; i++) { 
       alert(arr[i]); 
      } 
     }, 
     updateComment: function(newText, i){ 
      var arr = this.state.comments; 
      arr[i] = newText 
      this.setState({comments:arr}) 
     }, 
     //Properties of each comment 
     eachComment: function(text, i) { 
      return (
       <Comment 
        key={i} index={i} myVal={text} updateCommentText={this.updateComment} deleteFromBoard={this.removeComment}></Comment> 

      ); 
     }, 
     render: function(){ 
      return (
       <div> 
        <button onClick={this.reportMe.bind(null)} className="button-success">Report Contents Of Array</button> 
        <div className="board"> 
         { 
          this.state.comments.map(this.eachComment) 
         } 
        </div> 
       </div> 
      ) 
     } 
    }) 
    ReactDOM.render(<Board/>, document.getElementById('container')); 

Answer 1

試試這個：

var Comment = React.createClass({ 
    getInitialState: function(){ 
    return { 
     myVal : this.props.myVal || '', 
    } 
    }, 
    componentWillReceiveProps: function(nextProps){ 
     if(this.state.myVal !== nextProps.myVal){ 
      this.setState({myVal : nextProps.myVal}); 
      } 
    }, 
    handleChange : function(event){ 
     this.setState({ 
      myVal : event.target.value, 
     }); 
     ... 
    }, 
    .... 
    save: function() { 
     var val = this.state.myVal; 
     console.log('New Comment: ' + val); 
     this.props.updateCommentText(val, this.props.index); 
     this.setState({editing:false}) 
    }, 
    render: function(){ 
     (
      <div className="commentContainer"> 
       <div className="commentText">{this.props.myVal}</div> 
       <textarea ref="newText" 
         value={this.state.myVal} <-- state.myVal instead of props.myVal 
         onChange={this.handleChange.bind(this)}> 
       </textarea> 
       <button onClick={this.save.bind(this)} className="button-success">save</button> 
       <button onClick={this.remove.bind(this)} className="button-danger">Remove Question</button> 
      </div> 
     ); 
    } 

    } 
});