React - Ant 设计、带有 getFieldDecorator 和 initialValue 的表单在单个检查框中不起作用

Question

我正在使用 Ant Design 创建一个表单，当我尝试在单个复选框中使用带有initialValue 的getFieldDecorator时遇到问题。

initialValue 与复选框的值不正确匹配，这是一个示例。

Form {...formItemLayout} onSubmit={this.handleSubmit}>
    <Form.Item label="Checkbox">
      {getFieldDecorator("checkbox-1", {
        initialValue: "A"
      })(<Checkbox value="A">A</Checkbox>)}
    </Form.Item>

    <Form.Item label="Checkbox">
      {getFieldDecorator("checkbox-2", {
        initialValue: true,
        valuePropName: "checked"
      })(<Checkbox>A</Checkbox>)}
    </Form.Item>
  </Form>

在这种情况下，应该选中开头的checkbox-1 ，因为 initialValue 与复选框值相同，但并未选中。

我的错误是什么？

我还插入了带有代码的链接： https : //codesandbox.io/s/strange-driscoll-tehx4

Answer 1

valuePropName: 'checked'仅限于复选框。 见下文：

<Form.Item>
   {getFieldDecorator('propname', {
      valuePropName: 'checked'
   })(
      <Checkbox>Checkbox Text</Checkbox> 
   )}
</Form.Item>

不要设置defaultChecked因为这会干扰该值，因为它是在复选框本身上设置的。

如果绑定不能自动工作，请使用mapPropsToFields自己指定绑定。 请参阅下面的完整示例：

const BuildingCRUD = Form.create({
  name: "organisation_form",
  mapPropsToFields(props) {
    return {
      name: Form.createFormField({
        value: props.name,
      }),
      address: Form.createFormField({
        value: props.address,
      }),
      numberOfApartments: Form.createFormField({
        value: props.numberOfApartments,
      }),
      postcode: Form.createFormField({
        value: props.postcode,
      }),
      parking: Form.createFormField({
        value: props.parking,
      }),
      id: Form.createFormField({
        value: props.id,
      }),
    };
  },
})((props) => {
  const { getFieldDecorator } = props.form;

  return (
    <Form style={{ maxWidth: "320px" }} onSubmit={handleSubmit}>
      <Form.Item label="Name">
        {getFieldDecorator("name", {
          rules: [{ required: true, message: "Building name is required" }],
        })(
          <Input
            prefix={
              <Icon type="profile" style={{ color: "rgba(0,0,0,.25)" }} />
            }
            placeholder="Company name"
          />
        )}
      </Form.Item>

      <Form.Item>
        {getFieldDecorator("address", {
          rules: [{ required: true, message: "Building address is required" }],
        })(
          <Input
            prefix={<Icon type="mail" style={{ color: "rgba(0,0,0,.25)" }} />}
            placeholder="Address"
          />
        )}
      </Form.Item>

      <Form.Item>
        {getFieldDecorator("postcode", {
          rules: [{ required: true, message: "Building postcode is required" }],
        })(
          <Input
            prefix={<Icon type="mail" style={{ color: "rgba(0,0,0,.25)" }} />}
            placeholder="Postcode"
          />
        )}
      </Form.Item>

      <Form.Item>
        {getFieldDecorator("parking", {
          valuePropName: "checked",
        })(<Checkbox>Available Parking</Checkbox>)}
      </Form.Item>
    </Form>
  );
});

export default BuildingCRUD;

Answer 2

在使用getFieldDecorator API 时， initialValue将覆盖给定组件上的value属性。

options.initialValue - 您可以指定子节点的初始值、类型、可选值。 （注意：因为 Form 会在内部用 === 测试相等性，我们建议使用变量作为初始值，而不是字面量）

但在您的情况下， Checkbox没有value属性。

相反，您需要使用valuePropName并指定initialValue属性。

options.valuePropName - 子节点的道具，例如，Switch 的道具被“选中”。

因此initialValue: "A"没有意义，如果你使用例如Select component ，它可能是真的。

此外，您可以使用 props 或 state 作为初始值，如initialCheckBoxValue ：

class Demo extends React.Component {
  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <FlexBox>
        <Form>
          <Form.Item label="Checkbox">
            {getFieldDecorator('Select', {
              initialValue: 'B'
            })(
              <Select>
                <Select.Option value="A">A</Select.Option>
                <Select.Option value="B">B</Select.Option>
              </Select>
            )}
          </Form.Item>

          <Form.Item label="Checkbox A">
            {getFieldDecorator('checkbox-1', {
              initialValue: this.props.initialCheckBoxValue,
              valuePropName: 'checked'
            })(<Checkbox>A</Checkbox>)}
          </Form.Item>

          <Form.Item label="Checkbox B">
            {getFieldDecorator('checkbox-2', {
              initialValue: true,
              valuePropName: 'checked'
            })(<Checkbox>B</Checkbox>)}
          </Form.Item>
        </Form>
      </FlexBox>
    );
  }
}

const DemoForm = Form.create()(Demo);

ReactDOM.render(
  <DemoForm initialCheckBoxValue={false} />,
  document.getElementById('root')
);