如何在antd表单中使用Switch输入法？

Question

我正在使用 Antd

"version": "4.16.6",

，我们的其中一种表单中有 Switch 字段：

<Form
  ref={registerForm}
  initialValues={{
  hasArchive: true
}}>
    <Form.Item name="hasArchive" label="Has Archive?" valuePropName="checked">
      <Switch defaultChecked />
    </Form.Item>
</Form>

但是

Switch

不会改变

hasArchive

值。

Answer 1

这两个组件对我有用。

import React, { useState } from "react";
import { Form, Switch } from 'antd';

const Example1 = () => {
  const [isChecked, setIsChecked] = useState(false);
  const onFinish = (value) => {
    console.log(value)
  }
  return <Form
    name='example-form'
    onFinish={onFinish}
    initialValues={{
      isChecked
    }}
  >
    <Form.Item
      name='isChecked'
      valuePropName='checked'
    >
      <Switch onChange={setIsChecked} />
    </Form.Item>
  </Form>;
};

const Example2 = () => {
  const onFinish = (value) => {
    console.log(value)
  }
  return <Form
    name='example-form'
    onFinish={onFinish}
    initialValues={{
      isChecked: true
    }}
  >
    <Form.Item
      name='isChecked'
      valuePropName='checked'
    >
      <Switch />
    </Form.Item>
  </Form>;
};

Answer 2

使用

onChange

属性来监听开关切换。

import { Switch } from 'antd';

function handleSwitchToggle(checked) {
  console.log(`switch to ${checked}`);
}

ReactDOM.render(<Switch defaultChecked onChange={handleSwitchToggle} />, mountNode);

参考：https://ant.design/components/switch/

要更新表单值，请使用以下代码，只需将

initialValue

属性放入

Form.item

<Form.Item
        name="switch"
        label="Switch"
        valuePropName="checked"
        initialValue
>
        <Switch checkedChildren="YES" unCheckedChildren="NO" />
</Form.Item>

您可以使用 antd switch 示例测试此 Playground 中的代码 https://codesandbox.io/s/xiao-yan-qi-ta-zu-jian-antd-4-17-0-alpha-7-forked- 00zvbr？文件=/index.js:518-691

Answer 3

<Form.Item name="hasArchive" label="Has Archive?" valuePropName={ hasArchive ? 'checked' : 'unchecked' }>
  <Switch /> // remove defaultChecked
</Form.Item>