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