reactjs 在窗体内使用ant设计开关

0qx6xfy6 于 2022-12-29 发布在 React

关注(0)|答案(3)|浏览(197)

什么是正确的方式来使用Ant Design开关里面，我不能从官方文档得到太多。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) => {}

reactjs

来源：https://stackoverflow.com/questions/69715819/using-ant-design-switch-inside-forms

3条答案

按热度按时间

2cmtqfgy1#

我能够修复它，但做以下操作。

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

赞(0）回复(0）举报 2022-12-29

mgdq6dx12#

我猜你的价值观是{description: "foo", switch: undefined}？
在我的演示switch demo中，我将initialValue添加到Switch中，因此当我从表单中获取值时，我得到的是{description: "111", switch: true}。
我不知道这是不是你的意思。
或者你可以像这样

<Form.Item label="foo">         
  <Form.Item name="bar">           
    <Switch />         
  </Form.Item>         
  <span className="ant-form-text">Some text you want</span>       

</Form.Item>

赞(0）回复(0）举报 2022-12-29

6pp0gazn3#

这是因为Form.Item组件中只能有一个子组件。请在Switch组件旁边删除span，这样它就可以正常工作。

赞(0）回复(0）举报 2022-12-29