reactjs - 在 Forms 中使用 ant design switch

Question

ant design switch 内部的正确使用方法是什么，我从官方文档中没有得到太多信息。 Switch-Ant Design

下面是我的使用方法。

<Form form={form} layout="vertical">
  <Form.Item
    label="Description"
    name="description"
    rules={[{ required: true, message: 'Enter a description' }]}
  >
    <Input placeholder="Enter Description" />
  </Form.Item>

  <Form.Item name="switch" noStyle valuePropName="checked">
    <Switch checkedChildren="Yes" unCheckedChildren="No" />
    <span>Chargable</span>
  </Form.Item>

  <Button
    onClick={() => {
      form
        .validateFields()
        .then((values) => {
          form.resetFields()
          onCreate(values)
        })
        .catch((info) => {
          console.log('Validate Failed:', info)
        })
    }}
  >
    Save
  </Button>
</Form>

onCreate 不从开关中获取值，而是从描述中获取值

const onCreate = (values) => {}

Answer 1

我能够修复它，但执行了以下操作。

<td>
  <Form.Item valuePropName="checked" name="status" noStyle>
    <Switch checkedChildren="Yes" unCheckedChildren="No" />
  </Form.Item>
  <span className="ml-2">Status Enabled</span>
</td>