React에서 부모에게 상태를 되돌리는 방법

React에서 부모에게 상태를 되돌리는 방법

제출 버튼이 있는 양식이 있습니다.이 폼은 어떤 상태를 false에서 true로 설정하는 함수를 클릭 시 호출합니다.그런 다음 이 상태를 부모에게 전달하여 참이면 컴포넌트 A를 렌더링하지만 거짓이면 컴포넌트 B를 렌더링합니다.

내가 어떻게 반응하겠어?스테이트나 소품을 사용해야 하는 것은 알지만, 어떻게 사용하는지는 잘 모릅니다.또, 이것은 일방향 흐름의 리액션 원리에 반하는 것입니까?

컴포넌트 A 코드:

<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>
    )

★★handleClick부모에게 전달하고 소품으로 자식 구성 요소에 전달합니다.

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

이제 하위 구성 요소:

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

이렇게 하면 폼을 제출하면 부모 컴포넌트의 상태가 직접 갱신됩니다.이 경우 하위 구성 요소의 업데이트된 상태 값에 액세스할 필요가 없다고 가정합니다.이 경우 상태 값을 부모에서 자식에게 소품으로 다시 전달할 수 있습니다.단방향 데이터 흐름은 유지됩니다.

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

주(州)를 제안으로 통과

저는 최근에 어떤 상태변화에 매우 효과적인 방법을 배웠습니다.<Parent />의 <Child />★★★★★★ 。

이 질문에 대한 정확한 답변은 아닐 수 있지만, 이 상황이나 다른 유사한 상황에도 해당됩니다.

다음과 같이 동작합니다.

STATE <Parent />component - 다음 setState component에 setState Attribute component를 합니다.<Child />

const Parent = () => {
  const [value, setValue] = useState(" Default Value ");
   return (
    <Child setValue={setValue} />
  )
}

다음 를 (의) 에서 변경합니다.Child 표시

const Child = props => {
  return (
   <button onClick={() => props.setValue(" My NEW Value ")}>
    Click to change the state
  </button>
 )
}

하면, 「」의 상태가 됩니다.<Parent /> 컴포넌트로 .set의 <Child />컴포넌트, "component" 사용..네가 원하는 건 뭐든지 할 수 있어

앞으로 당신과 다른 개발자들에게 도움이 되길 바랍니다.

부모 컴포넌트:

getDatafromChild(val){
    console.log(val);
}
render(){
 return(<Child sendData={this.getDatafromChild}/>);
}

하위 구성 요소:

callBackMethod(){
   this.props.sendData(value);
 }

간단한 절차:

1. Parent라는 컴포넌트를 만듭니다.
2. 상위 구성 요소에서 일부 데이터를 수락하고 수락된 데이터를 상위 상태로 설정하는 방법을 만듭니다.
3. Child라는 구성 요소를 만듭니다.

4. 합니다.props.

5. 의 을 받아들이다this.props메서드 이름 뒤에 하위 상태를 인수로 전달합니다.

6. 메서드는 부모의 상태를 자녀의 상태로 바꿉니다.

다음은 데이터를 자녀에서 부모에게 전달하는 방법의 예입니다(같은 문제가 있어 사용법을 제시했습니다).

부모에게는 기능(데이터가 있는 아이로부터 호출한다)이 있습니다.

handleEdit(event, id){ //Fuction
    event.preventDefault();  
    this.setState({ displayModal: true , responseMessage:'', resId:id, mode:'edit'});  
 } 

dishData = <DishListHtml list={products} onDelete={this.handleDelete} onEdit={(event, id) => this.handleEdit(event, id)}/>;

자 컴포넌트:

<div to="#editItemDetails" data-toggle="modal" onClick={(event)=>this.props.onEdit(event, listElement.id) }
                        className="btn btn-success">

반응에서는 소품을 사용하여 부모에서 자녀로 데이터를 전달할 수 있습니다.그러나 데이터를 자식 간에 전달하려면 다른 메커니즘이 필요합니다.

이를 위한 다른 방법은 콜백 방식을 작성하는 것입니다.콜백 메서드는 작성 시 아이에게 전달합니다.

class Parent extends React.Component {
myCallback = (dataFromChild) => {
    //use dataFromChild
},
render() {
    return (
        <div>
             <ComponentA callbackFromParent={this.myCallback}/>
        </div>
    );
  }
}

decisionPage 값은 부모가 전달한 콜백 방식을 통해 자녀에서 부모에게 전달합니다.

     class ComponentA extends React.Component{
          someFn = () => {
            this.props.callbackFromParent(decisionPage);
          },
          render() {
            [...]
          }
     };

SomeFn은 handleClick 메서드가 될 수 있습니다.

부모 컴포넌트가 기능 컴포넌트인 경우 컨텍스트 사용 방법을 사용할 수 있습니다.여기에는 참조를 객체에 전달하고 참조를 stateChanging 메서드에 전달합니다.이것에 의해, 부모 상태와의 동기 상태를 유지하면서, 자녀내의 상태를 변경해, 참조할 수도 있습니다.이에 대한 자세한 내용은 유튜브 비디오에서 'React 16.12 Tutorial 20: Introt to Context API' 및 'React 16.12 Tutorial 21: useContext'라는 제목의 codedamn을 통해 확인할 수 있습니다.

이건 내가 원하던 대로 작동한다.단, (customer_id, customer_name)이 자녀에서 부모로 갱신되는 값으로 50개의 레코드가 있는 데이터 집합의 경우에는 지연됩니다.하위 구성요소에서 React.useEffect를 사용하여 setState를 수행합니다.

동일한 문제가 발생하여 다음 코드를 수행했습니다. 부모 const에서 PARENT = ( ) = > { const [value, setValue] = useState("...."); 하위에서 반환 ( ) }

const CHILD = props => {
  return (
   <button onClick={() => props.setValue("....")}>
    Click to change the state
  </button>
 )
}

언급URL : https://stackoverflow.com/questions/40722382/how-to-pass-state-back-to-parent-in-react