En nuestra aplicación Redux Form 5.3 (no 6.x), quiero mostrar un <input type="checkbox" /> así:
// In some cases, fieldHelper.checked is initially undefined. Then, when the // user clicks one of the checkboxes, fieldHelper.checked is // explicitly set to true or false. This change from one of the component's // props being undefined to having a value causes a React warning; see // http://stackoverflow.com/a/38015169/473792 and // https://facebook.github.io/react/docs/forms.html#controlled-components // So to prevent that warning, we do a quick null check on // fieldHelper.checked and replace it with false explicitly if it is // undefined before rendering the checkbox. const fieldHelper = this.props.field['checkbox']; const checked = fieldHelper.checked || false; const modifiedFieldHelper = Object.assign({}, fieldHelper); delete modifiedFieldHelper.checked; return ( <input checked={checked} {...modifiedFieldHelper} /> );}
Como se señaló en el comentario, en mi entorno de prueba, this.props.field['checkbox'].checked no está undefined inmediatamente después de montar <input> . Como resultado, cuando mis pruebas modifican el valor de this.props.field['checkbox'].checked , recibo la siguiente advertencia:
Advertencia: ApplicantForm está cambiando una casilla de verificación de entrada no controlada de tipo para que sea controlada. Los elementos de entrada no deben cambiar de no controlados a controlados (o viceversa). Decida entre usar un elemento de entrada controlado o no controlado durante la vida útil del componente.
... A menos que establezca explícitamente elaccesorio checked en <input> en false en lugar de undefined , como se demuestra en el fragmento de código que publiqué anteriormente.
En lugar de usar esta verificación nula, me gustaría establecer el valor inicial de this.props.fields['checkbox'].checked antes de ejecutar mis pruebas. Sé que puedo establecer el valor inicial de los campos en Redux Form. ¿Hay alguna manera de establecer el valor inicial de una propiedad auxiliar como la propiedad checked que también controla Redux Form?
Puede crear un condicional simple en su atributo marcado para que cuando el valor no esté definido, simplemente devuelva falso:
<input type="checkbox" checked={typeof this.props.fields['checkbox'].checked == 'undefined'?false:this.props.fields['checkbox'].checked} onClick={() => {... your onClick code ...}} />Las casillas de verificación no son diferentes de las entradas de texto. Todavía puede desestructurar el objeto de campo en su <input> . Vea cómo se usa el valor employed en el Ejemplo de formulario simple v5.3.3 .
<input type="checkbox" {...myField}/> Redux Form detectará que es una casilla de verificación (realmente detecta valores boolean ) y usará el accesorio checked .
Nunca he usado Redux-Form, pero para mostrar el valor marcado predeterminado para una casilla de verificación en React predeterminado, deberá usar el atributo defaultChecked . Acepta un booleano.
<input type="checkbox" defaultChecked={/*bool*/} />