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