componentWillReceiveProps和回调问题

我在React中遇到了一个很大的问题 - 可能是缺乏理解。我有一个可以进行回调的子组件，并且有一个componentWillReceiveProps函数。问题是，我无法在小孩持有的文字输入上写字。我会在代码中更好地解释自己。componentWillReceiveProps和回调问题

问题

我有一个文本输入一个孩子。那个孩子在他的父母里面。

我需要：手动

上的文字输入。
通知父母文本已更改。
在某些情况下修改来自父级的输入。

孩子

先后为文本显示文本道具。 textChanged是父母将适用的回调。

父

包含孩子，对孩子的回调函数不更新孩子的状态并持有一个按钮来修改孩子的文本。

问题

如果我写的文本输入，它不能很好地工作。如果我删除了子节点中的回调调用（this.props.textChanged（event.target.value）; part），则输入工作正常，但父节点不会收到子节点更新。如果我删除了componentWillReceiveProps部分，我无法从其父文件更新孩子的文本。

你可以玩代码片段 - 它“工作”。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='container'></div> 
 

 
<script type="text/babel"> 
 
    
 
var Child = React.createClass({ 
 
    propTypes: { 
 
     text: React.PropTypes.string, 
 
     textChanged: React.PropTypes.func 
 
    }, 
 
    getInitialState: function() { 
 
     return ({ 
 
      text: this.props.text 
 
     }); 
 
    }, 
 
    handleChange: function (event) { 
 
     if (event.target.value != null) { 
 
      this.setState({ text: event.target.value }); 
 
      if (this.props.textChanged !== undefined) { 
 
       this.props.textChanged(event.target.value); 
 
      } 
 
     } 
 
    }, 
 
    componentWillReceiveProps: function(nextProps) { 
 
     if (nextProps.text != this.state.text) { 
 
      this.setState({ 
 
       text: nextProps.text 
 
      }); 
 
     } 
 
    }, 
 
    render: function() { 
 
     return (
 
      <div> 
 
       <input className="form-control" value={this.state.text} onChange={this.handleChange} /> 
 
      </div> 
 
      ); 
 
    } 
 
}); 
 

 
var Parent = React.createClass({ 
 
    propTypes: { 
 
     childText: React.PropTypes.string, 
 
    }, 
 
    getInitialState: function() { 
 
     return ({ 
 
      childText: this.props.childText, 
 
      stateChangingProperty: true 
 
     }); 
 
    }, 
 
    handleTextChange: function (event) { 
 
     this.setState({ 
 
      stateChangingProperty: !this.state.stateChangingProperty 
 
     }); 
 
    }, 
 
    handleButton: function() { 
 
     this.setState({ 
 
      childText: "SOMETHING NEW" 
 
     }); 
 
    }, 
 
    render: function() { 
 
     return (
 
      <div> 
 
       <Child text={this.state.childText} textChanged={this.handleTextChange} /> 
 
       <button type="button" onClick={this.handleButton}>Write SOMETHING NEW on child</button> 
 
      </div> 
 
      ); 
 
} 
 
}); 
 

 
    ReactDOM.render(<Parent childText="text" />, 
 
        document.getElementById('container') 
 
    ); 
 
    
 
    
 
    </script>

问题

我怎样才能达到预期的行为？我的目标错了吗？

在此先感谢！

来源

2016-11-17 Fran Herrera