子コンポーネントの状態を親から更新するにはどうすればよいですか？

Question

私はReactを使い始めているだけで、これを理解することはできません。

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

Selectコンポーネントはファイルを選択するためのもので、検索コンポーネント内の入力テキストの初期値をファイル名に設定したいとします。ここで

は、ユーザーが親によって設定された初期値からの入力の値を変更しようとするたび、私は新しい入力値と子の状態を設定しますが、この、検索コンポーネント今

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

です入力値をリセットする子の再レンダリングをトリガーします。これを回避する正しい方法は何ですか？

このような入力の値をvalue={this.props.term} に割り当てると、状態を変更すると、ファイル名をデフォルト値として子の再レンダリングがトリガーされ、ユーザーが編集できるようになります。

Answer 1

onChangeが子に対して呼び出されたときに値を設定する親になるように、検索で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>