reactjs - inputs - Configuración de una casilla de verificación "comprobar" la propiedad en React

react select

Question

Estoy teniendo un problema muy molesto con React y las casillas de verificación. La aplicación con la que estoy trabajando requiere una lista de casillas de verificación que representan las configuraciones que se mantienen en el back-end. Hay una opción para restaurar la configuración a su estado original .

Al principio, creé un componente que tiene un objeto como un mapa de configuración. Cada configuración tiene una clave y un valor booleano. Por lo tanto:

{
    bubbles: true,
    gregory: false
}

Debe ser representado como:

<input type="checkbox" value="bubbles" checked="checked" />
<input type="checkbox" value="gregory" />

Ahora, parece que React ignora cómo se supone que funciona una casilla de verificación. No quiero establecer los valores de las casillas de verificación, quiero la propiedad "marcada".

Sin embargo, si intento algo como esto:

<input
    type="checkbox"
    value={setting}
    checked={this.settings[setting]}
    onChange={this.onChangeAction.bind(this)}
/>

Me sale esta advertencia:

Advertencia: AwesomeComponent está cambiando una entrada no controlada del tipo de casilla de verificación para ser controlada. Los elementos de entrada no deben cambiar de incontrolado a controlado (o viceversa). Decida entre utilizar un elemento de entrada controlado o no controlado durante la vida útil del componente. Más información: [ alguna página de documentos inútiles que leí varias veces en vano ]

Así que decidí crear otro componente para envolver cada casilla individual y obtuve esto:

<input
    type="checkbox"
    checked={this.state.checked}
    onChange={this.onChangeAction.bind(this)}
/>

Ahora lo checked es una propiedad presente directamente en mi estado.

Esto produce la misma advertencia, así que intenté usar defaultChecked :

<input
    type="checkbox"
    defaultChecked={this.state.checked}
    onChange={this.onChangeAction.bind(this)}
/>

Lo que hace que desaparezca la advertencia, pero ahora no puede restablecer el valor checked valor predeterminado. Así que intenté jugar con el método componentWillReceiveProps , de esta manera estoy bastante seguro de que mi estado es correcto, this.state.checked es correcto y el componente vuelve a aparecer.

Y lo hace. Pero la casilla de verificación permanece como estaba originalmente. Por ahora dejé esa fea advertencia y estoy usando checked . ¿Cómo arreglo esto para que la advertencia desaparezca?

Estaba pensando que tal vez haya una forma de forzar la reproducción del componente, de modo que capture el nuevo valor de defaultChecked y lo use. Pero no sé cómo hacer eso. ¿Tal vez suprimir la advertencia sólo para este componente? ¿Es eso posible? Tal vez hay algo más que se puede hacer?

Answer 1

Básicamente, el defaultChecked significa que no desea controlar la entrada; simplemente se procesa con este valor y, por lo tanto, no hay forma de controlarlo. Además, no se debe usar el valor, sino que debe checked en su lugar, por lo que su segundo código debe ser correcto. Y no deberías usarlos a la vez.

<input
    type="checkbox"
    checked={this.state.checked}
    onChange={this.onChangeAction.bind(this)}
/>

¿Puedes crear un pequeño violín con este comportamiento?

Answer 2

El problema surge si configura la propiedad checked de su casilla de verificación como null o undefined .

Esos son valores "falsos" en JS, sin embargo, React trata un valor null como si la propiedad no estuviera establecida en absoluto. Dado que el estado predeterminado de una casilla de verificación no está marcado, todo funcionará bien. Si luego configura el valor true React piensa que la propiedad repentinamente comienza a existir! Esto es cuando React calcula que cambió de incontrolado a controlado, ya que ahora existe la proposición checked .

En su ejemplo, puede deshacerse de esta advertencia cambiando checked={this.settings[setting]} a checked={!!this.settings[setting]} . Note el doble bang ( !! ). Se convertirán en null o undefined a false (y se dejarán solo a la true ), por lo que React registrará su propiedad checked con un valor de false y comenzará con un componente de formulario controlado.

También tuve este problema y, también, leí los documentos sobre el tiempo de los componentes de los componentes controlados , pero finalmente lo descubrí, así que pensé en compartirlo. Además, dado que las entradas normales de la versión 15.2.0 se activan para ser controladas por el value configuración, mientras que las casillas de verificación se inicializan como controladas por la configuración checked , independientemente de su propiedad de value , que agregó un poco a la confusión.

Answer 3

La respuesta de Amoebe es correcta, pero creo que hay una solución más limpia que el banco doble ( !! ). Simplemente agregue una propiedad defaultProps con valor false para la propiedad checked de su componente Checkbox:

import React from ''react'';

const Checkbox = ({checked}) => (
  <div>
      <input type="checkbox" checked={checked} />
  </div>
);

Checkbox.defaultProps = {
  checked: false
};

export default Checkbox;

Answer 4

Puede asignar sus datos al estado y luego hacer uso de la propiedad marcada asociada con la casilla de verificación individual para establecer el estado como

{   this.state.data.map(function(item, index) {
      return (

        <input type="checkbox" checked={item.value} onChange={this.handleChange.bind(this, index)}/>

      );
    }.bind(this))
    }

Datos de muestra en estado es como

data: [{name:''bubbles'', value: true}, {name:''gregory'', value: false}]

JSFIDDLE