부모로부터 하위 구성 요소의 상태를 업데이트하는 방법은 무엇입니까?

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가 자식에게 호출 될 때 값을 설정하는 부모가되도록 검색에서 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>