reactjs无法修改绑定值

Question

我正在将reactjs与父组件和子组件一起使用。在孩子中，我将textarea的值绑定到父母发送的属性。当我通过点击＆＃39;删除＆＃39;删除子组件时按钮，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>
       );
     }

   }
});