Input component > feeds Forms component - how to handle submit?-CodePudding

I am missing how to bring the input value out of the child component.

I have an Input component that I want to re-use, there I can see what happens onChange, and I see every change on the input field.

Then on the parent component, Form, where I use <Input />, I have the rest of the form with the Submit button. At this level, I want to handle onSubmit, but I cannot see/console the value of the input here. I can only see it from the child.

Any ideas about what I am doing wrong?

Input.js - here I can see the input value onChange

function Input(props) {
    const { label, name, value } = props;
    const handleChange = (event) => {
        const updateForm = {...Form};
        console.log("change:", updateForm)
        updateForm[label] = event.target.value;
      }
    return (
        <label>
            {label}
            <input name={name} value={value} onChange={handleChange}></input>
        </label> 
    )
}

export { Input }

Forms.js - here I cannot get access to the input value and submit/handle it

function Form(props) {
  
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(Input.value);
    console.log(props.label.value)
    alert(`form is: ${event.target.input}`);
  }
      return (
      <>
        <form onSubmit={handleSubmit}>
          <Input label={props.label} />
          <input type="submit" value="Submit"></input>
        </form>
      </>
    )
}

I have that structure because I am defining what I want in my Form on the main HomePage component:

  function Home() {
  return (
    <>
        .......
        <Section withForm label={["Name"]} {...homeObjFive}/>
        <Section withForm label={"Phone"} {...homeObjOne}/>
        .......

    </>
  )
}

CodePudding user response：

Suppose you have a form with two inputs, name and email (these are the id props of the inputs). You can extract the form values like this:

  const handleSubmit = (event) =>
  {
    event.preventDefault()
    const data = new FormData(event.currentTarget)
    const name = data.get('name')
    const email = data.get('email')
    // do something with the data
  }

You can read more about FormData here.

CodePudding user response：

This is the perfect case to use the useRef function from react.

In Form.js

import React, { useRef } from 'react'

create a reference constant and pass it as a prop into the input component. and change the input value that is handled in the onSubmit function to the reference

Also in Form.js (changes are made to the submit function)

function Form(props) {

  const { inputValue } = useRef(); // added
  
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(inputValue); // changed
    console.log(props.label.value)
    alert(`form is: ${event.target.input}`);
  }
      return (
      <>
        <form onSubmit={handleSubmit}>
          {/* added the inputValue prop to the input component */}
          <Input label={props.label} inputValue={inputValue} />
          <input type="submit" value="Submit"></input>
        </form>
      </>
    )
}

and now inside of the Input component set the input elements reference to the inputValue prop. you will no longer need a onChange function as reacts useRef function is updated automatically

In Input.js

function Input(props) {
    return (
        <label>
            {props.label}
            <input name={props.name} value={props.value} ref={props.inputValue}></input>
        </label> 
    )
}

export { Input }

Hope this helped ;)