如何在React Hooks中触发从子状态到父状态的改变?

时间:2019-08-03 08:48:41

标签: javascript reactjs react-hooks

这些在父组件中...

   const [setQuantity, quantity] = useState(1);

   const handleSetQuantity = e => {
      console.log(e.target.value);
      console.log("TEST");

      setQuantity(e.target.value);
    };

我将其传递给子组件,如下所示:

<SomeChildComponent
    setQuantity={e => handleSetQuantity(e)}
    quantity={quantity}
/>

在:

内部
<select
    onChange={e => props.setQuantity(e)}
    value={props.quantity}
    >
    <option value={1}>1</option>
    <option value={2}>2</option>
    <option value={3}>3</option>
</select>

由于出现“ TEST”日志,因此我可以从子级访问该功能。但是它告诉我:

Uncaught TypeError: setQuantity is not a function

我在做什么错?如果是这样,从子组件触发的操作更改父状态的正确方法是什么?

2 个答案:

答案 0 :(得分:4)

您要传递一个已执行的函数,并且应该传递引用。

<SomeChildComponent
    setQuantity={handleSetQuantity}
    quantity={quantity}
/>

const [setQuantity, quantity] = useState(1);

您交换了值和函数的位置,应为:

const [quantity, setQuantity] = useState(1);

答案 1 :(得分:0)

您可以直接通过prop将方法传递给子组件

<SomeChildComponent
    {setQuantity}
    {quantity}
/>

然后,您的子组件将能够像在父组件中一样使用该方法。