Estoy usando el campo de entrada de MUI para muchas secciones de entrada de mi cuestionario y quiero guardarlo en mi variable de estado que es un objeto que contiene todos los valores de mi formulario. ¿Cómo puedo manipular mi objeto formData en un componente MUI reutilizable?
Actualmente estoy pasando formData como accesorio para el componente, pero no estoy seguro de cómo usar setFormData dentro del componente, ya que será una propiedad diferente cada vez que lo use.
Estaba pensando que cada pregunta es una propiedad del objeto de estado formData, por lo que se verá como
formData{question1: 'foo', question2: 'bar'}Así es como se ve el formulario en este momento (no me importa cambiar la estructura si tiene sentido hacerlo
Eche un vistazo a InputField en el formulario (también adjunté el código del componente)
<QuestionLabel>Do you have a "Nickname":</QuestionLabel> <InputField value={props.formData.nickname}/> <QuestionLabel>Preferred Language:</QuestionLabel> <InputField value={props.formData.language}/> <QuestionLabel>Occupation:</QuestionLabel> <InputField value={props.formData.occupation}/>Así es como se ve el componente (soy consciente de que tendré que cambiar esto)
export default function InputField(props){ return( <TextField fullWidth value={props.value} variant='standard' /> ) }Descargo de responsabilidad La primera publicación lo siento si el formato no es perfecto o si adjunté los fragmentos de código de una manera inconveniente, por favor dame algunos consejos si ese es el caso
Dado que no hay vinculación bidireccional en reaccionar, la forma normal de procesar la entrada del formulario con componentes controlados es extraer el texto del elemento dom específico cada vez que cambia. Hacemos esto usando event.target.value para extraer los datos, pero ¿cómo los agregamos correctamente a su estado en un componente reutilizable?
Para eso, nos gustaría agregar una etiqueta de nombre al campo de entrada, que luego usaríamos al agregar el valor a nuestro estado. Como dijiste correctamente, formData.someName = 'some text' Actualizamos nuestro estado en una función changeHandler que actualiza nuestro estado cada vez que cambia la entrada.
Por ejemplo, supongamos que estamos pasando setFormData, formData y un nombre de campo a los accesorios:
export default function InputField(props){ const {setFormData, formData, fieldName} = props //destructure the props const changeHandler = (event) => { // updates the formData state of formData.name to equal event.target.value setFormData({...formData, [event.target.name]: event.target.value}) } return( <TextField fullWidth name={fieldName} value={formdata.fieldName} onChange={changeHandler} variant='standard' /> ) }El uso del componente anterior se vería así:
<InputField setFormData={setFormData} formData={formData} fieldName="question1">Pude hacerlo funcionar pasando la propiedad al componente que necesitaba ser cambiado; aquí está mi función handleChange en el componente de campo de texto:
const handleChange = (event) => { var formData = {...props.formData} formData[props.property] = event.target.formData props.onChange(formData) }