React에서 상태를 부모에게 다시 전달하는 방법은 무엇입니까?

Question

제출 단추가있는 양식이 있습니다. 이 폼은 무언가의 상태를 false에서 true로 설정하는 onclick 함수를 호출합니다. 그런 다음이 상태를 부모에게 다시 전달하여 true이면 componentA를 렌더링하지만 false이면 componentB를 렌더링합니다.

어떻게 반응합니까? 주 (state) 나 소도구 (props)를 사용해야하지만 어떻게해야하는지 잘 모릅니다. 또한 이것이 일방적 인 흐름의 반응 원리를 모순 되는가?

ComponentA 코드 :이 표시 내용을 제어

<form onSubmit={this.handleClick}> 


handleClick(event) { 
    this.setState({ decisionPage: true }); 
    event.preventDefault(); 
    }; 

부모 요소 :

return (
     <div> 
     {this.props.decisionPage ? 
     <div> 
      <LoginPage /> 
     </div> 
     : 
     <div> 
      <Decision showThanks={this.props.showThanks}/> 
     </div> 
     } 
     </div> 
    ) 

Answer 1

상위로 이동 handleClick 및 소품 등의 하위 구성 요소로 전달합니다. 아이 컴퍼넌트에 지금

<LoginPage handleClick={this.handleClick.bind(this)}/> 

:

<form onSubmit={this.props.handleClick}> 

직접 부모 구성 요소의 상태를 업데이트 할 양식을 제출이 방법. 이는 하위 구성 요소에서 업데이트 된 상태 값에 액세스 할 필요가 없다고 가정합니다. 그렇게하면 상태 값을 부모에서 자식으로 다시 전달할 수 있습니다. 단방향 데이터 흐름이 유지됩니다.

<LoginPage handleClick={this.handleClick.bind(this)} decisionPage={this.state.decisionPage}/>