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')
);