0
166
Vistas¿Cómo restablezco el valor del campo de texto según lo elegido en el botón de opción?
Tengo estos botones de radio para hombres y mujeres. Si el usuario ha hecho clic en 'masculino', aparecerá un campo de texto para el mensaje. El problema es que si elijo male y luego escribo el mensaje y elijo female la próxima vez, el valor del mensaje de campo de msg sigue ahí. ¿Cómo puedo cambiarlo de nuevo a simplemente nada?
El mensaje sigue ahí aunque ya haya hecho clic en 'hombre'
códigos y caja: https://codesandbox.io/s/radio-button-cn9708?file=/demo.js
códigos:
export default function ControlledRadioButtonsGroup() { const [value, setValue] = React.useState("female"); const handleChange = (event) => { setValue(event.target.value); }; const [msg, setMsg] = React.useState(""); return ( <div> <FormControl> <FormLabel id="demo-controlled-radio-buttons-group">Gender</FormLabel> <RadioGroup aria-labelledby="demo-controlled-radio-buttons-group" name="controlled-radio-buttons-group" value={value} onChange={handleChange} > <FormControlLabel value="female" control={<Radio />} label="Female" /> <FormControlLabel value="male" control={<Radio />} label="Male" /> </RadioGroup> </FormControl> {value === "male" && ( <TextField label="msg" value={msg} onChange={(e) => setMsg(e.target.value)} /> )} {msg} - Message </div> ); }Intenté esto:
if (value === "female") { setMsg(""); }Pero esto se mostrará como:
Demasiados renderizados. React limita el número de renderizaciones para evitar un bucle infinito.
3 Respuestas
Responde la pregunta0
Pon eso en el manejador handleChange :
const handleChange = (event) => { if (event.target.value === "female") { setMsg(""); } setValue(event.target.value); };0
Tienes que envolver esta parte en useEffect hook
React.useEffect(() => { if (value === "female") { setMsg(""); } }, [value])0
Intenta usar un gancho useEffect :
useEffect(() => { value === 'female' && setMsg('') }, [value]) La matriz en el segundo parámetro ( [value] ) especifica las dependencias. Si alguna de las dependencias cambia, el efecto se activará. Solo recuerda que solo hace una comparación superficial.