0
274
ViewsLa propiedad 'deshabilitar' del campo de texto de la interfaz de usuario del material no se actualizará más de una vez
Tratando de hacer un programa donde hay interruptores de radio, cada uno de los cuales equivale a un valor booleano diferente. Dependiendo del valor booleano, haría que la propiedad 'deshabilitar' en el campo de texto fuera verdadera o falsa. Mi código permite que el botón se seleccione de forma predeterminada como edición habilitada y cuando selecciono deshabilitar, deshabilita el campo de texto. Sin embargo, si hago clic en deshabilitar, luego intento y hago clic en habilitar nuevamente, no cambiará el campo de texto de deshabilitar.
const [radioEdit, setRadioEdit] = React.useState(false); <RadioGroup value={radioEdit} onChange={(e) => setRadioEdit(e.target.value)} aria-labelledby="demo-radio-buttons-group-label" name="radio-buttons-group" row > <FormControlLabel value={true} control={<Radio />} label="Disabled" /> <FormControlLabel value={false} control={<Radio />} label="Enabled" /> <p>{String(radioEdit)}</p> <TextField id="outlined-basic" variant="outlined" size="small" ////////RIGHT HERE//////// value={data["companyname"]} disabled={radioEdit} /> 
Si el estado predeterminado de radioEdit no es 'falso', se desactiva automáticamente (se establece en verdadero o nulo) y no me permite actualizarlo varias veces.
1 answers
Answer question0
El problema es con onChange que ha definido con RadioGroup . Por lo general, definimos onChange={(e) => setRadioEdit(e.target.value)} para establecer el valor de la entrada de texto enEventChangeHandler. Pero aquí es para el botón de radio. Estaba usando mecanografiado para encontrar la respuesta para esto y tan pronto como copié y pegué su código, me mostró el error en setRadioEdit(e.target.value) mientras que setRadioEdit debería ser booleano. La razón por la que TypeScript es súper útil. La respuesta es
onChange={() => setRadioEdit(!radioEdit)} Estoy alternando mi estado aquí en onChange . Entonces, cuando setRadioEdit como true , en realidad radioEdit se configuraría como true . Así es como funciona el useState . Así que al definir setRadioEdit(!radioEdit) estamos alternando el estado. Si es true cambia a false y viceversa.
También deberá cerrar el componente </RadioGroup> . respuesta completa
const [radioEdit, setRadioEdit] = useState(false); return ( <> <RadioGroup value={radioEdit} onChange={(e) => setRadioEdit(!radioEdit)} aria-labelledby="demo-radio-buttons-group-label" name="radio-buttons-group" row > <FormControlLabel value={true} control={<Radio />} label="Disabled" /> <FormControlLabel value={false} control={<Radio />} label="Enabled" /> </RadioGroup> <p>{String(radioEdit)}</p> <TextField id="outlined-basic" variant="outlined" size="small" disabled={radioEdit} /> </> );