Soy nuevo en React y he estado tratando de crear un formulario de registro, pero no pude encontrar una manera de obtener datos de mi entrada cuando se hace clic en un botón (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> ); }He compartido mi componente de entrada a continuación en caso de que ayude (he acortado el código mientras publicaba)
function Input(props) { return ( <input type={props.type} className="input"></input> ); }Las entradas de su formulario no están controladas: https://reactjs.org/docs/forms.html#related-components
React no registra las actualizaciones del valor de la entrada. Una versión de trabajo simplificada rápida para darle una idea de cómo funciona:
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> ); } De esta forma, React está 'controlando' la entrada y puedes hacer lo que quieras con el valor del email en la función handleSubmit() .
Puede hacer uso de useRef aquí. Simplemente llame a handleSubmit cuando haga clic en el botón Enviar como se muestra a continuación.
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> ); }Puede obtener más claridad sobre el usoRef aquí documento oficial