reactjsは私が親と子コンポーネントでreactjsを使用していますバウンド値

Question

を変更傾けます。子では、親から送られたプロパティにテキストエリアの値をバインドしています。私は「削除」ボタンをクリックすることにより、子コンポーネントを削除すると予想されるように、テキストエリアの値は、子コンポーネントの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> 
     ); 
    } 

    } 
});