web-dev-qa-db-ja.com

Reactで親に状態を戻す方法は？

送信ボタンがあるフォームがあります。そのフォームは、onclick関数を呼び出して、何かの状態をfalseからtrueに設定します。次に、この状態を親に戻し、trueの場合はcomponentAをレンダリングし、falseの場合はcomponentBをレンダリングするようにします。

どうすれば反応しますか？私は状態または小道具を使用する必要があることを知っていますが、それを行う方法がわかりません。また、これは一方向流反応原理と矛盾していますか??

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>
    )
javascriptreactjsreact-state-management
18
The worm

handleClickを親に移動し、それを小道具として子コンポーネントに渡します。

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

子コンポーネントで：

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

この方法でフォームを送信すると、親コンポーネントの状態が直接更新されます。これは、子コンポーネントの更新された状態値にアクセスする必要がないことを前提としています。その場合、状態値をプロップとして親から子に戻すことができます。一方向のデータフローが維持されます。

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

子から親にデータを渡す方法の例を次に示します（同じ問題があり、これを使用して出てきます）。

親には、関数があります（そのためのデータを持つ子から呼び出します）

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">
3
Abhinav bhardwaj

簡単な手順：

  1. Parentというコンポーネントを作成します。
  2. 親コンポーネントで、一部のデータを受け入れ、受け入れたデータを親の状態として設定するメソッドを作成します。
  3. Childというコンポーネントを作成します。

  4. Parentで作成されたメソッドをpropsとして子に渡します。

  5. this.propsの後にメソッド名を使用して親の小道具を受け入れ、引数として子の状態を渡します。

  6. このメソッドは、親の状態を子の状態に置き換えます。
1
Aftab22

Reactでは、propsを使用して親から子にデータを渡すことができます。ただし、子から親にデータを渡すには別のメカニズムが必要です。

これを行う別の方法は、コールバックメソッドを作成することです。子の作成時にコールバックメソッドを子に渡します。

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

親が渡したコールバックメソッドを介して、子から決定ページの値を親に渡します。

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

SomeFnは、handleClickメソッドです。

1
Daneesha