Establecer la propiedad Checkbox en React

1. Checkbox en React
2. Establezca una propiedad de casilla de verificación check en React

Los formularios definidos en JSX son más que simples elementos HTML. Se supone que los formularios almacenan y transfieren datos internos, por lo que necesitan un estado interno para administrarlos.

Tomemos las casillas de verificación HTML como ejemplo. En su estado natural, las casillas de verificación HTML pueden almacenar el valor del atributo checked. Sin embargo, si está desarrollando una aplicación, almacenar los datos en el estado interno del elemento es insuficiente. Debe almacenar el valor del atributo checked en el estado interno de su aplicación React para que pueda hacer referencia a él en toda la aplicación.

Checkbox en React

Los elementos de casilla de verificación en React deben seguir ciertas reglas. Hace 10 años, podría haber sido aceptable crear nuevos atributos para elementos HTML de forma condicional. Esto va en contra de las recomendaciones de mejores prácticas en React. Cualquier elemento de casilla de verificación debe crearse con o sin el atributo checked.

Los elementos de casilla de verificación iniciados sin el atributo checked no están controlados:

<input type="checkbox" name="uncontrolled"></input>

Los elementos de casilla de verificación definidos con el atributo checked se controlan:

<input type="checkbox" checked={true} name="controlled"></input>

Un elemento <input> debe iniciarse como un componente controlado o no controlado. Un error común es establecer el atributo checked en un valor null o undefined. Un codificador de JavaScript podría esperar que estos valores se conviertan automáticamente a un valor booleano false, pero React funciona de manera diferente.

Error confuso

Cuando React encuentra algún atributo con un valor null o undefined, ignorará el atributo y no lo representará. Posteriormente, si el valor inicial pasa a ser true, volverá a aparecer un atributo checked, que desencadena el cambio de un componente no controlado a uno controlado.

React arrojará un error, indicándole que los componentes deben inicializarse como controlados o no controlados. Si el componente de casilla de verificación se definió sin un atributo checked, no podrá agregar uno más adelante.

Mucha gente no sabe que establecer el atributo checked en una casilla de verificación lo inicializa como un componente controlado. Es por eso que están confundidos por el mensaje de error, que dice:

Warning: AwesomeComponent is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

Establezca una propiedad de casilla de verificación check en React

Una vez que comprenda el problema, solucionarlo es muy fácil. Si tiene la intención de crear un componente de casilla de verificación controlado, debe asegurarse de que el atributo checked se evalúe como true o false. Esto es posible estableciendo la propiedad defaultProps y estableciendo el atributo checked en false por defecto. Aquí hay una muestra de código:

class App extends Component {
  constructor(props) {
    super(props) this.state = {}
  }
  render() {
    console.log('App started');
    this.defaultProps = {
      checked: false
    } return <input type = 'checkbox' checked = {this.checked} name =
                            'controlled'>< /input>
  }
}

Otra ventaja de utilizar defaultProps es que solo representan el predeterminado. El usuario aún puede interactuar con la aplicación y cambiar el estado del atributo checked.

Establecer el atributo checked como true o false significaría que no se permitiría a los usuarios cambiar su estado.