如何從父級更新子組件的狀態？

Question

我剛剛開始使用React，無法弄清楚這一點。

<Select> 
     <Search term={this.state.filename} /> 
    </Select> 

選擇組件用於選擇文件，我想將搜索組件中輸入文本的初始值設置爲文件名。

這裏是搜索組件

<form onSubmit={this.handleSubmit}> 
    <input 
     type="search" 
     value={this.props.term} 
     onChange={this.handleChange} 
    /> 
    </form> 

現在，每當用戶嘗試輸入的值從父設置的初始值的變化，我設置了孩子的狀態，新的輸入值，但這觸發重新設置重置輸入值的子項。什麼是解決這個問題的正確方法？

我目前的想法是，如果我將這個輸入的值賦值爲value={this.props.term} ，那麼更改狀態將觸發用文件名作爲默認值重新呈現子對象，並且用戶將能夠對其進行編輯。

Answer 1

嘗試onChange on Search被委託給一個道具，以便您的父母將成爲在child上調用onChange時設置值的人。

onChange={this.props.onInputChange} 

Answer 2

這裏您使用的是value={this.props.term}，它使輸入成爲受控組件。此處的值將始終與來自父組件的狀態this.props.term相同。 <Search term={this.state.filename} />

我想你真正想在這裏做的是改變父組件的狀態。

然後你應該從父組件傳遞一個函數到子組件。該函數將改變父組件的狀態。你應該定義在父組件的類似：

onChildInputChange(term) { 
    this.setState({term: term }) 
} 

然後通過道具把它傳遞給子組件

<Select> 
    <Search term={this.state.filename} onChildInputChange={this.onChildInputChange} /> 
</Select> 

從而使子組件，你可以這樣做：

<form onSubmit={this.handleSubmit}> 
    <input 
     type="search" 
     value={this.props.term} 
     onChange={()=>{this.props.onChildInputChange()}} 
    /> 
    </form>