Question

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

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'属性，请参见下文：

不要设置defaultChecked，因为它会干扰该值，因为它是在复选框本身上设置的。您只想将form.item的值绑定到其子组件的checked属性。

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

如果绑定无法自动运行，请使用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将测试与 ===内部，我们建议使用变量作为initialValue，而不是文字）

但是对于您来说，Checkbox没有value属性。

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

options.valuePropName-子节点的道具，例如，开关处于“选中”状态。

因此，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')
);

React-Ant设计，带有getFieldDecorator的Form和initialValue在单个chechbox中不起作用

2 个答案: