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

Question

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

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

Answer 1

根据您的解释，看起来 Order 组件需要访问其子 Food 组件内的状态。 这是经典的 lifting state up IMO。

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

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

Answer 2

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

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

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

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

Answer 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} />;
};