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

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

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

但就你而言，Checkbox没有value财产。

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

options.valuePropName - 子节点的属性，例如 Switch 的属性是 'checked'。

因此initialValue: "A"没有任何意义，如果您使用例如Select组件，则可能是正确的。

此外，您可以使用 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')
);