es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

React defaultValue y value juntos en los campos de entrada.

06 Aug, 2023 Programación

Dado que mi formulario es grande, aquí estoy pegando una pequeña parte del código para entender mejor.

Cuando selecciono nombre de usuario desde campo de selección, luego el siguiente campo dob deshabilitado debe poblarse. Así que funciona bien.

Pero el problema está en mi formulario, tengo una opción llamada botón de guardado parcial que guardará en almacenamiento local. Pero esto no se mostrará en el campo dob cuando actualicemos la página.

Para solucionar esto, cambié la propiedad de valor a defaultValue, entonces se mostrarán los datos pero fallará al establecer el valor cuando se activa el evento onchange select.

Incluso intenté usar tanto defaultValue como la propiedad de valor juntas, pero obtengo un error que dice:

index.js:1 Advertencia: MuiOutlinedInputInput contiene un elemento de tipo texto con las props value y defaultValue. Los elementos de entrada deben ser controlados o no controlados (especifica solo la prop value o la prop defaultValue, pero no ambas). Decide entre usar un elemento de entrada controlado o no controlado y elimina una de estas props. Más información: https://reactjs.org/link/controlled-components 

<FormControl >
        <InputLabel id="userLabel" >Username</InputLabel>
        <Select
          labelId="userLabel"
          id="userLabelId"

          MenuProps={MenuProps}
          label="Username"
          name="userName"
          onChange={(e) => {
            handleChange(e);
          }}
          value={userDetail.userName ?? ''}

        >
          <MenuItem value="">
            <em>Ninguno</em>
          </MenuItem>
          {userList ? userList.map((user) => (
            <MenuItem key={user.id} value={user.id ?? ''}>
              {user.userName}
            </MenuItem>
          )) : null}
        </Select>

      </FormControl>

      <TextField
        margin="normal"
        required
        id="dob"
        label="Fecha de nacimiento"
        name="dob"

        value={userDetail.dob ?? ''}

        disabled
      />
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema mencionado en el código proporcionado está relacionado con la configuración del valor de un campo de selección basado en los datos del almacenamiento local. La solución intentada es cambiar la propiedad value a defaultValue, pero esto causa problemas cuando se activa el evento onChange en el campo de selección.

    Una solución podría ser establecer condicionalmente la propiedad value solo si no hay datos del almacenamiento local presentes. De esta manera, el valor del campo de selección se establecerá en los datos almacenados al actualizar la página, pero también permitirá que el evento onChange actualice el valor si es necesario.

    Además, el mensaje de advertencia sugiere utilizar un elemento de entrada controlado o no controlado, pero no ambos. Un elemento de entrada controlado es aquel en el que el valor es controlado por React, mientras que un elemento de entrada no controlado depende del navegador para mantener el estado. Para solucionar esta advertencia, se recomienda establecer solo la propiedad value o la propiedad defaultValue, pero no ambas.

    Aquí tienes un fragmento de código actualizado con la solución sugerida:

    const storedUserDetail = JSON.parse(localStorage.getItem('userDetail')) || {};
const [userDetail, setUserDetail] = useState(storedUserDetail);

const handleChange = (e) => {
  const { name, value } = e.target;
  setUserDetail({ ...userDetail, [name]: value });
  localStorage.setItem('userDetail', JSON.stringify({ ...userDetail, [name]: value }));
};

return (
  <formcontrol>
    <inputlabel id="userLabel">Nombre de usuario</inputlabel>
    <select labelid="userLabel" id="userLabelId" menuprops="{MenuProps}" label="Nombre de usuario" name="userName" onchange="{handleChange}" value="{storedUserDetail.userName" userdetail.username="" ''}="">
      <menuitem value="">
        <em>Ninguno</em>
      </menuitem>
      {userList
        ? userList.map((user) => (
            <menuitem key="{user.id}" value="{user.id" ''}="">
              {user.userName}
            </menuitem>
          ))
        : null}
    </select>
  </formcontrol>
  <textfield margin="normal" required="" id="dob" label="Fecha de nacimiento" name="dob" value="{storedUserDetail.dob" userdetail.dob="" ''}="" disabled=""></textfield>
);

    Ten en cuenta que se han eliminado los atributos value y defaultValue, y ahora el value se establece condicionalmente, ya sea en los datos almacenados o en el valor del estado. Los datos almacenados se recuperan al comienzo del componente usando useState y localStorage.getItem. La actualización del estado y los datos del almacenamiento local se manejan mediante el método handleChange.

Comments are closed.