Estoy tratando de crear un formulario simple usando React usando el siguiente código:
<div className="wrapper"> <h1>How About Them Apples</h1> <form onSubmit={handleSubmit}> <fieldset> <label> <p>Name</p> <input name="name" /> </label> </fieldset> <button type="submit">Submit</button> </form> </div>Ahora, lo que quiero saber es que no estamos usando ninguna función interna para llamar al controlador de envío, pero no se llama durante el renderizado como se llamaría si hubiera hecho lo mismo para un controlador de clic como:
<button onClick={onClickHandler}>Button</button>
Me estoy perdiendo de algo ?
¿Esto hace lo que quieres?
function onClickhandler(event) { event.preventDefault() console.log('Submit!') } <div className="wrapper"> <h1>How About Them Apples</h1> <form> <fieldset> <label> <p>Name</p> <input name="name" /> </label> </fieldset> <br /> <button onClick={onClickhandler(event)}> Submit</button> </form> </div> O puede hacer lo mismo con el botón type=submit
function handleSubmit(event) { event.preventDefault() console.log('Submit!') } <div className="wrapper"> <h1>How About Them Apples</h1> <form onSubmit={handleSubmit(event)}> <fieldset> <label> <p>Name</p> <input name="name" /> </label> </fieldset> <br /> <button type="submit"> Submit</button> </form> </div>onSubmit no funciona porque no creó una función. Una función en una definición simple es lo que defines para hacer algo por ti. si creas una función como esta:
const onClickHandler =()=>{ console.log('You clicked me') }Y luego lo llama en su botón como este Botón, registrará 'Me hizo clic en la consola' cada vez que hizo clic en ese botón. Esto se debe a que crea una función llamada onClickHandler que hará algo por usted y, por ejemplo, registrará "Me hizo clic" en la consola.
Pero si lo llamas así Botón sin crear una función que hará algo. Entonces el botón no hará nada, no funcionará.
Para hacer una función en línea en el botón para que haga algo por usted, debe hacerlo así: <button onClick={()=> console.log('Hiciste clic en mí')}>Button
Y funcionará porque definimos la función directamente dentro del botón en lugar de definir la función antes de crear un botón.
Todo esto también aplica con onSubmit. Si no creó una función que haga algo por usted o si no usó la función directamente agregando () =>, entonces su formulario onSubmit no enviará todas sus entradas. Para que onSubmit funcione, debe hacer algo como esto:
<form onSubmit={()=> console.log('You submitted your form')}> //All input goes here </form>Nota: si lo que quiere hacer dentro de la función es más que, entonces no olvide hacer tanto la función en línea como la función separada como esta: for inline
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> ()=>{ console.log('abc....') console.log('abc....') }para función separada
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> const onSubmit()=>{ console.log('abc...') console.log('abc...') }