CODEWITHSUNDEEP
javascriptreactjs
Mounish
Mounish

Reputation: 31

How to get input value on form submission in React

I'm new to React and have been trying to make a registration form, but I couldn't find a way to get data from my input when a button is clicked (onClick)


function App() {

  const userData = []

  function handleClick() {
    //get input data here
  }

  return (
    <div className="form-main">
      <div className='em'>
        <label className='label '> User e-mail </label>
        <Input type="email" />
      </div>
      <div className='pw'>
        <label className='label '> Password </label>
        <Input type="password" />
      </div>

      <button type="submit" className="submit-btn" onClick={handleClick}>Signup</button>
      
    </div>
  );
}

I've shared my input component below in case that helps (I've shortened the code while posting)


function Input(props) {
    return (
        <input type={props.type} className="input"></input>
    );
}

Upvotes: 2

Views: 12084

Answers (2)

Hritik Sharma
Hritik Sharma

Reputation: 2010

You can make use of useRef here . Just call handleSubmit when submit button is clicked as shown below .

const Form = () => {
   const emailRef = React.useRef(null);

   const handleSubmit = (event) => {
       event.preventDefault();
       // ... make use of your email data entered inside input 
       console.log(emailRef.current.value) // consoles the email

   }

   return (
      <form onSubmit={handleSubmit}>
         <input type='email' ref={emailRef} />
         <button type='submit' onClick={handleSubmit}>Submit</button>
      </form>
   );
}

You can get more clarity on useRef here official doc

Upvotes: 0

John Detlefs
John Detlefs

Reputation: 1033

Your form inputs are uncontrolled - https://reactjs.org/docs/forms.html#controlled-components

Updates to the value of the input aren't being registered by React. A quick stripped down working version to give you an idea of how it works:

const Form = () => {
   const [email, setEmail] = useState('');

   const handleSubmit = (event) => {
       event.preventDefault();
       // ... do something with email
   }

   return (
      <form onSubmit={handleSubmit}>
         <input type='email' value={email} onChange={(e) => { setEmail(e.target.value) }} />
         <button type='submit'>Submit</button>
      </form>
   );
}

In this way React is 'controlling' the input and you can do whatever you like with the email value in the handleSubmit() function.

Upvotes: 2

Related Questions