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

Question

I know that 'passing value from child to parent' is a common question, but I can't find an answer to my particular case.

Basically, I have a parent component which has a list of children which have input values.

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>
    )
}

I'm aware that you would normally pass a function as prop to the children. That would work if the child knows when to call that function, but in this case the parent only knows because it has the button that triggers the event.

I could use an onChange event listener in the TextField inside the children, and constantly update the state in the parent whenever we change the text. But, this seems like a lot of complexity when I just want to get the values when we submit.

Answer 1

If you don't want to use local state and onChange events (wich you said), you could use useRef and read the value directly. Look at this example:

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

basically each of your child component would get ref wich it would forward to your input component, and then in submit you can directly access child value.

Hope this helps.