Question

在我们的Redux Form 5.3（而不是6.x）应用中，我想像这样呈现<input type="checkbox" />：

// 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}
  />
);

}

正如评论中所述，在我的测试环境中，this.props.field['checkbox'].checked在安装undefined后立即<input>。因此，当我的测试修改this.props.field['checkbox'].checked的值时，我收到以下警告：

警告：ApplicantForm正在更改要控制的类型复选框的不受控制的输入。输入元素不应从不受控制切换到受控制（或反之亦然）。决定在组件的生命周期内使用受控或不受控制的输入元素。

...除非我明确将<input>上的checked prop设置为false而不是undefined，正如我在上面发布的代码段中所示。

我想在测试运行之前设置this.props.fields['checkbox'].checked的初始值，而不是使用此null检查。 I know I can set the initial value of fields in Redux Form.有没有办法设置辅助属性的初始值，如Redux Form也控制的checked属性？

Answer 1

您可以在checked属性中创建一个简单的条件，这样当值未定义时，您只返回false：

<input 
  type="checkbox" 
  checked={typeof this.props.fields['checkbox'].checked == 'undefined'?false:this.props.fields['checkbox'].checked} 
  onClick={() => {... your onClick code ...}} />

Answer 2

我从未使用过Redux-Form，但在默认情况下显示复选框的默认选中值React，您需要使用defaultChecked属性。它接受一个布尔值。

<input type="checkbox" defaultChecked={/*bool*/} />

Answer 3

复选框与文本输入没有区别。您仍然可以将字段对象解构为#ifndef LED #define GPIO_MAKE_ANALOG Nop() #define GPIO_HIGH(A, B) Nop() #define GPIO_LOW(A, B) Nop() #endif #ifdef LED #define GPIO_MAKE_ANALOG gpio_make_analog(A, B) #define GPIO_HIGH(A, B) gpio_high(A, B) #define GPIO_LOW(A, B) gpio_low(A, B) #endif。了解<input> Simple Form Example中employed值的使用方式。

v5.3.3

Redux Form会检测到它是一个复选框（实际上它检测到<input type="checkbox" {...myField}/>值）并使用boolean道具。

在Redux表单中，如何设置复选框的checked属性的初始值？

3 个答案: