时间戳

首页 > 解决方案 > 当事件在父级中触发时，将值从 React 子级传递给父级组件？

javascript - 当事件在父级中触发时，将值从 React 子级传递给父级组件？

问题描述

我知道“将价值从孩子传递给父母”是一个常见问题，但我找不到我的具体案例的答案。

基本上，我有一个父组件，它有一个具有输入值的子组件列表。

function Parent() {

    function submit() {
        // make some API call with the values from the children.   
    }

    return (
        <Child></Child>
        <Child></Child>
        ...
        <Button onClick={submit}>Submit</Button>
    )

}

function Child() {
    return (
        <TextField></TextField>
    )
}

我知道您通常会将一个函数作为道具传递给孩子们。如果孩子知道何时调用该函数，这将起作用，但在这种情况下，父母只知道，因为它有触发事件的按钮。

我可以在子级内的 TextField 中使用onChange事件侦听器，并在我们更改文本时不断更新父级中的状态。但是，当我只想在提交时获取值时，这似乎很复杂。

标签： javascriptreactjs

解决方案

如果您不想使用本地状态和 onChange 事件（如您所说），则可以使用 useRef 并直接读取该值。看这个例子：

https://gist.github.com/jamesreggio/142215754ad06f375bd87657c6227ed8

基本上，您的每个子组件都会获得 ref，它将转发到您的输入组件，然后在提交时您可以直接访问子值。

希望这可以帮助。

推荐阅读