Estoy usando la "version": "4.16.6", y tenemos el campo Cambiar en uno de nuestros formularios:
<Form ref={registerForm} initialValues={{ hasArchive: true }}> <Form.Item name="hasArchive" label="Has Archive?" valuePropName="checked"> <Switch defaultChecked /> </Form.Item> </Form> pero Switch no cambia el valor hasArchive .
Use el atributo onChange para escuchar el interruptor de alternancia.
import { Switch } from 'antd'; function handleSwitchToggle(checked) { console.log(`switch to ${checked}`); } ReactDOM.render(<Switch defaultChecked onChange={handleSwitchToggle} />, mountNode);referencia: https://ant.design/components/switch/
Para actualizar los valores del formulario, use el siguiente código, simplemente coloque el atributo initialValue en Form.item
<Form.Item name="switch" label="Switch" valuePropName="checked" initialValue > <Switch checkedChildren="YES" unCheckedChildren="NO" /> </Form.Item>puede probar el código en este patio de recreo con el ejemplo de interruptor antd https://codesandbox.io/s/xiao-yan-qi-ta-zu-jian-antd-4-17-0-alpha-7-forked-00zvbr? archivo=/index.js:518-691
Estos dos componentes están trabajando para mí.
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>; };