Tengo un formulario que debería imprimir los datos en la consola, pero desafortunadamente no puedo hacerlo. Quiero imprimir datos en la consola cuando se envía un formulario. El formulario no se envía, no sé por qué. Tengo el código a continuación. Te agradecería mucho que te decidieras.
import { Button, Grid, Paper, TextField } from "@mui/material"; import React from "react"; import { useForm } from "react-hook-form"; export default function Page2(props) { const { handleSubmit } = useForm(); const handelInputChange = (e) => { const { name, value } = e.target; console.log(name, value); }; const handleData = (data) => { console.log("data"); }; return ( <> <Paper style={{ margin: "10px auto", textAlign: "center" }} elevation={24} > <h1 style={{ textAlign: "center" }}>Todo Application</h1> <form onSubmit={handleSubmit(handleData)}> <Grid style={{ margin: "10px" }} container spacing={1} direction="column" > <Grid item xs={6}> <TextField name="title" label="Title" variant="standard" onChange={handelInputChange} /> <TextField name="desc" label="Description" variant="standard" onChange={handelInputChange} /> <TextField name="priority" type="number" label="Priority" variant="standard" onChange={handelInputChange} /> </Grid> </Grid> </form> <button type="submit" variant="contained" color="primary"> Add </button> </Paper> </> ); }Además de Steve, puede usar simplemente la función de registro para hacer el trabajo por usted, solo proporcione la función de registro en el inputRef de su componente de formulario MUI.
import { Button, Grid, Paper, TextField } from "@mui/material"; import React from "react"; import { useForm } from "react-hook-form"; export default function Page2(props) { const { handleSubmit, register } = useForm(); const handelInputChange = (e) => { const { name, value } = e.target; console.log(name, value); }; const handleData = (data) => { console.log("data",data); }; return ( <> <Paper style={{ margin: "10px auto", textAlign: "center" }} elevation={24} > <h1 style={{ textAlign: "center" }}>Todo Application</h1> <form onSubmit={handleSubmit(handleData)}> <Grid style={{ margin: "10px" }} container spacing={1} direction="column" > <Grid item xs={6}> <TextField name="title" label="Title" variant="standard" inputRef={register} onChange={handelInputChange} /> <TextField name="desc" label="Description" variant="standard" inputRef={register} onChange={handelInputChange} /> <TextField name="priority" type="number" label="Priority" variant="standard" inputRef={register} onChange={handelInputChange} /> </Grid> </Grid> <button type="submit" variant="contained" color="primary"> Add </button> </form> </Paper> </> ); }Tienes una estructura HTML incorrecta. button[type=submit] debe estar dentro de la etiqueta <form>
Tienes bastantes cosas que hacer para llevar este formulario a console.log . En primer lugar, como mencionó el otro cartel, el button de envío debe estar dentro del formulario (y probablemente desee poner en mayúscula esa B en " <Button " para que esté utilizando el componente MUI.
<form onSubmit={handleSubmit(handleData)}> <Grid style={{ margin: "10px" }} container spacing={1} direction="column" > <Grid item xs={6}> <TextField name="title" label="Title" variant="standard" onChange={handelInputChange} /> ... </Grid> </Grid> // Moved and renamed here <Button type="submit" variant="contained" color="primary"> Add </Button> </form> Eso resuelve su problema de envío, pero luego FormProvider que console.log("data") solo contendrá un objeto vacío {} react-form-hooks los elementos del formulario en el formulario que debe controlar. Para ello es necesario registrar el componente. He agregado un ejemplo de código de trabajo en una forma de completar esta tarea.
En este ejemplo, creé un contenedor FormFieldController genérico que puede usar para pasar cualquier campo de formulario que necesite. (No usaría esto en el código de producción, sin limpieza, ya que solo se entiende como un ejemplo):
const FormFieldController = ({ component: Component = TextField, name = "", defaultValue = "", label = "", validation = {}, required = false, valueProp = "value", callbackProp = "onChange", onChange, ...rest }) => { const { control } = useFormContext(); return ( <Controller name={name} control={control} defaultValue={defaultValue} rules={validation} render={({ field: { onChange: internalOnChange, value, ref }, fieldState: { error } }) => { const pipes = { [valueProp]: value, [callbackProp]: function () { internalOnChange.apply(this, arguments); // Middleman callback to allow for onChange back to the caller, if needed if (onChange) { onChange.apply(this, arguments); } } }; return ( <> <Component id={name} inputRef={ref} caption={error ? error?.message : ""} label={label} {...pipes} {...rest} /> </> ); }} /> ); };