Estoy trabajando en un formulario donde se mostrarán algunas entradas adicionales según el valor de selección. El valor de select cambia al seleccionar una opción diferente, pero el campo de texto "numberOfUsers" no se vuelve visible.
Puedo ver el valor modificado que se imprime en la consola. Se imprime Sí al seleccionar la primera opción y No al seleccionar la selección.
No entiendo por qué no funciona. Por favor, hágame saber los errores que he cometido.
A continuación se muestra el código que he escrito.
import React from 'react' import { useState } from 'react' import { Grid } from '@mui/material' import './Form.css' export const AddStartupForm = () => { const [fields, setFields] = useState({}) function handleChange(event) { const target = event.target; const value = target.type === 'checkbox' ? target.checked : target.value; const name = target.name; fields[name] = value setFields(fields) console.log(fields['revenueGenerated']) } return ( <Grid container sx={{py: 5}}> <Grid item xs={1} sm={4}></Grid> <Grid item xs={10} sm={4}> <form> <label htmlFor="startupName">Startup Name</label> <input type="text" name="startupName" onChange={handleChange} value={fields["startupName"]} /> <label htmlFor="countryName">Country</label> <input type="text" name="countryName" onChange={handleChange} value={fields["countryName"]} /> <label htmlFor="revenueGenerated">Do you make revenue?</label> <select name="revenueGenerated" onChange={handleChange} value={fields["revenueGenerated"]} > <option disabled selected value=''> -- select an option -- </option> <option value="Yes">Yes</option> <option value="No">No</option> </select> { fields['revenueGenerated'] === 'Yes' ? <> <label htmlFor="numberOfUsers">Sample Yes</label> <input type="text" name="numberOfUsers" /> </> : null } </form> </Grid> </Grid> ) }fields es un objeto y la actualización de un accesorio en ese objeto no cambia la referencia al objeto, por lo que la verificación de igualdad de reaccionar no reconocerá un cambio (y, por lo tanto, no se volverá a procesar).
Intenta cambiar
fields[name] = value setFields(fields)a
setFields({...fields, [name]: value})El estado no se actualiza, porque la referencia del estado no cambia. Puede intentarlo agregando un console.log antes de su declaración de return :
console.log(fields); return (...)Nunca cambia.
Intenta configurar tus campos de esta manera:
function handleChange(event) { const target = event.target; const value = target.type === "checkbox" ? target.checked : target.value; const name = target.name; setFields({ ...fields, [name]: value }); } Si cambia su controlador para usar useCallback , asegúrese de agregar los fields como una dependencia, para que se cambie:
const handleChange((event) => { const target = event.target; const value = target.type === "checkbox" ? target.checked : target.value; const name = target.name; setFields({ ...fields, [name]: value }); }, [fields]);