如何在 React 中将状态传递回父级？

Posted 2023-02-22

【中文标题】如何在 React 中将状态传递回父级？

【英文标题】：How to pass state back to parent in React?

【发布时间】：2017-04-04 23:29:16

【问题描述】：

我有一个带有提交按钮的表单。 该表单调用一个函数 onclick 将某物的状态从 false 设置为 true。 然后我想将此状态传递回父级，以便如果它为 true，则呈现 componentA，但如果为 false，则呈现 componentB。

我会怎么做？ 我知道我需要使用状态或道具，但不知道该怎么做。这是否也与单向流反应原理相矛盾？？

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

【参考方案1】：

将handleClick 移动到父组件，并将其作为道具传递给子组件。

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

现在在子组件中：

<form onSubmit=this.props.handleClick>

这种方式提交表单会直接更新父组件的状态。这假设您不需要访问子组件中更新的状态值。如果这样做，那么您可以将状态值作为道具从父级传回给子级。保持单向数据流。

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

【讨论】：

好答案 :) 我还建议提问者阅读官方文档中的Lifting State Up 和Thinking in React，以获取有关以这种方式做事背后的推理的更多信息。

@RamiEnbashi 但这如何将 decisionPage 的状态更改为 true 从而在该组件内渲染渲染函数？

@RamiEnbashi 我有 console.logged 并且我可以看到状态变为 true 但是你怎么知道，如果这是真的渲染上面的组件？

@joe-clay 发布的链接非常好。保持父组件中条件渲染的逻辑与您已有的相同。通过将handleClick 移动到父组件，即使您从子组件触发更改，您也正在更改该父组件的状态。 handleClick 中的 this 指的是声明函数的组件，而不是调用它的组件。

@RamiEnbashi 欢呼芽。现在可以使用三元运算符，不确定是否需要但可以工作:)

【参考方案2】：

这是我们如何将数据从孩子传递给父母的示例（我遇到了同样的问题并使用了这个）

在父母身上，我有一个函数（我会从一个孩子那里调用它并为其提供一些数据）

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】：

简单步骤：

创建一个名为 Parent 的组件。 在父组件中创建一个接受一些数据和集合的方法 接受的数据作为父母的状态。 创建一个名为 Child 的组件。

将在 Parent 中创建的方法作为 props 传递给 child。

使用 this.props 后跟方法接受 parent 中的道具 命名并将孩子的状态作为参数传递给它。

该方法会将父状态替换为子状态。

【讨论】：

我真的很喜欢这个答案，但您能否在第 5 步中提供更多详细信息？

@Tricky 创建此代码来演示这些步骤。希望这可以帮助。谢谢。 codesandbox.io/s/flamboyant-sun-839f8

@Aftab22 当您输入输入时，“来自子级的数据”总是落后一步，因为 React 中的 setState() 是异步的 ***.com/a/38558311/704387 我还没有解决这个问题。

@JérômeOudoul 我同意，我也注意到了这种异步行为并且无法修复它。

【参考方案4】：

在 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 方法。

【参考方案5】：

只是为了向我澄清一些事情，但是为什么您将其称为回调函数，通常回调函数是作为另一个函数的参数接收的函数（根据定义），我没有特别看到 myCallback 函数是另一个函数的参数。 如果我错了，请纠正我！

【参考方案6】：

如果您的父组件是功能组件，您现在可以使用使用上下文方式。这涉及将 ref 传递给对象并将 ref 传递给 stateChanging 方法。这将允许您做的是从父状态更改子状态，并在保持与父状态同步的同时引用状态。您可以在 youtubeVideo 中了解更多相关信息，作者为 codedamn，标题为“React 16.12 教程 20：上下文 API 简介”和“React 16.12 教程 21：useContext”

【参考方案7】：

在父组件中：

getDatafromChild(val)
    console.log(val);

render()
 return(<Child sendData=this.getDatafromChild/>);

在子组件中：

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

【讨论】：

那么这个方法究竟是如何工作的呢？父级将“getDatafromChild”方法传递给子级，并以“sendData”作为处理程序，让子级再次将数据传递给父级？

【参考方案8】：

将状态作为道具传递

我最近学习了一种方法，该方法非常适用于从 <Child /> 组件更改 <Parent /> 组件的状态。

这可能不是这个问题的确切答案，但它肯定适用于这种情况和其他类似情况。

它的工作原理是这样的：

在<Parent /> 组件中设置默认的STATE - 然后将'setState' 属性添加到<Child />

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

然后从Child组件改变状态（在Parent中）

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

当您单击按钮时，<Parent /> 组件中的状态将更改为 set 中的任何状态 <Child /> 组件中的状态，利用“props”..这可以是你想要的任何东西。

我希望这对您和其他开发人员将来有所帮助。

【讨论】：

这完全符合预期。几天以来我一直在寻找这个答案，今天终于奏效了。非常感谢分享知识。请您简要解释一下这实际上是如何在幕后工作的，尽管它看起来很简单，但对初学者来说却令人生畏。

【参考方案9】：

这正是我想要的。但是，如果数据集包含 50 条记录，其中 (customer_id, customer_name) 作为要从子级更新到父级的值，那么这会滞后。在子组件中使用 React.useEffect 做 setState