在 React 中将状态从子组件传递到父组件？答案

【问题标题】：Passing a state from child component to parent component in React?在 React 中将状态从子组件传递到父组件？
【发布时间】：2021-07-27 09:29:29
【问题描述】：

我有两个名为 Food 和 Order 的组件。在食品组件中，用户可以选择一种食品。我正在将选定的食物存储在一个状态中。 Food 组件在 Order 组件中呈现。在这里用户可以继续订购他们的食物。

我的问题是如何将选定的食物从 Food 组件传递到 Order 组件？

【问题讨论】：

在 order 组件中定义一个函数，并将其作为 props 传递给 Food。当用户选择食物时，以选择的食物状态为参数调用该函数

标签： reactjs react-hooks react-state

【解决方案1】：

根据您的解释，Order 组件似乎需要访问其子 Food 组件内的状态。这是经典的lifting state upIMO。

您需要在Order 组件中保留代表所选食物的状态并将其作为道具传递。

如果这不是您想要的，请最好在代码框中分享您迄今为止所做的工作。这样会更容易提供帮助:)

【讨论】：

如何用react hooks做提升状态？

【解决方案2】：

您可以在Food 组件中创建一个事件，例如onFoodSelect，每次用户选择一种食物并将选择的食物作为参数传递时都会调用它...

然后监听来自Order组件的事件

// Food
// ....
return <>
      {items.map(item=>(
         <div key={item+Math.random} onClick= {_=>props.onFoodSelect(item)}>{item}</div>)
      }
     </>
// ....

// Order
// ...
return <Food
             onFoodSelect={item=>{
                  // Do whatever
             }}
           />
// ...

【讨论】：

【解决方案3】：

根据设计，React 无法访问其子状态。您必须创建一个回调并将其作为道具传递给Food：

const Food = ({ onChange }) => {
  const [state, setState] = useState("");

  function handleOnChange(e) {
    setState(e.target.value);
    onChange(e.target.value);
  }

  return (
    <>
      <select onChange={handleOnChange} value={state}>
        <option value="pizza">Pizza</option>
        <option value="burger">Burger</option>
      </select>
      Selected: {state}
    </>
  );
};

const Order = () => {
  function handleOnFoodChange(value) {
    console.log(value);
  }
  return <Food onChange={handleOnFoodChange} />;
};

【讨论】：

你能用单选按钮改变这个代码来选择食物吗？
。这种情况怎么办？