how to pass input value from child to parent in functional componenent-CodePudding

How do I pass input ref values from Child.js to Parent.js in functional component? I have tried using forwardRef but it can only pass one value, what I need is passing multiple input values from Child.js to Parent.js

Child.js

export default function Child() {
  const id1 = useRef('')
  const id2 = useRef('')

  return (
            <>
                <input type="text" id="id1" ref={id1} />
                <label for="id1"> ID 1</label>

                <input type="text" id="id2" ref={id2} />
                <label for="id2"> ID 2</label>
            </>
        )
}

Parent.js

export default function Parent() {
  function onSubmit() {
    console.log(## I WANT REF ID1 AND ID2 FROM CHILD.JS VALUE HERE ##)
 }

  return ( <>
    <Child />

    <button onClick={onSubmit}>
      Submit
    </button>
  </>)
}

CodePudding user response：

Child.js

export default function Child(props) {
  const id1 = useRef('')
  const id2 = useRef('')

  props.func('My name is Dean Winchester & this is my brother Sammie');

  return (
            <>
                <input type="text" id="id1" ref={id1} />
                <label for="id1"> ID 1</label>

                <input type="text" id="id2" ref={id2} />
                <label for="id2"> ID 2</label>
            </>
        )
}

parent.js

export default function Parent() {
  function onSubmit() {
    console.log(## I WANT REF ID1 AND ID2 FROM CHILD.JS VALUE HERE ##)
 }

    const pull_data = (data) => {
    console.log(data); // LOGS DATA FROM CHILD (My name is Dean Winchester... &)
  }

  return ( <>
    <Child func={pull_data} />

    <button onClick={onSubmit}>
      Submit
    </button>
  </>)
}

CodePudding user response：

Pass a callback to Child and call it in useEffect:

useEffect(() => {
    onRefLoad(id1, id2);
}, [])

and save it to some kind of state in Parent to be able to use it in onSubmit

CodePudding user response：

You have multiple options here, depending on your situation. For forms easiest solution would be to use FormData interface to get all values in form. You set up your onSubmit handler on form and when form will be submitted via default browser methods (pressing Enter/Return in field or pressing submit button), you can get form from event and build FormData object:

// parent
function Form({ children }) {
  function handleSubmit(event) {
    // disable page reload and actual submitting of form if needed
    event.preventDefault();
    let formData = new FormData(event.target);
  }
  return (
    <form id="my-form-id" onSubmit={handleSubmit}>
      {children}
      <button type="submit">Submit</button>
    </form>
  );
}

However it might not work properly, if you use some non standard elements. In this case you can set up some kind of onChange handler to get data from child and save it in parent state. When button will be pressed you will get data from local (in parent) state and use it.