reactjs - 如何使用 mobx-form 设置复选框的值？

Question

使用 mobx-form 我试图在表单加载时设置标记复选框以选中。设置值或选中的属性似乎不起作用。

const fields = [
  {
    name: 'my_checkbox',
    label: 'The Checkbox: ',
    type: 'checkbox',
    rules: 'boolean',
    value: true, // do I set initial, default ?
    checked:true
  },
];

...

<input {...form.$('my_checkbox').bind()} />

完整示例代码https://codesandbox.io/s/N914WNRpv

Answer 1

你可以像这样传递一个选中的属性

<input
        checked={field.value}
        {...field.bind({
          type: 'checkbox',
        })}
      /> {field.label}

参见：https ://github.com/foxhound87/mobx-react-form-demo/blob/master/src/components/inputs/SimpleCheckbox.jsx

Answer 2

如果您希望默认值正常工作，checked ={field.value}必须在“绑定”函数之后！

<input             
    {...field.bind({
        type: 'checkbox',
    })}
    checked={field.value}
/> {field.label}