react+antd 踩坑日记

Switch 无法动态修改defaultChecked的属性值的办法

1. 设置初始值为变量
2. 在 Form.Item 标签上添加属性 valuepropname={初始值} & key={初始值}

     const [statusChecked, setStatusChecked] = useState(false); 
        <FormItem
          name='status' label='状态'
          valuePropName={`${statusChecked}`}
          key={`${statusChecked}`}>
          <Switch defaultChecked={statusChecked}
                  checkedChildren='启用'
                  unCheckedChildren='禁用'
                  onChange={(checked) => {
                    if (checked) {
                      form.setFieldsValue({
                        status: 'E',
                      });
                    } else {
                      form.setFieldsValue({
                        status: 'D',
                      });
                    }
                  }} />
        </FormItem>

initialValue 输入框默认值

<FormItem initialValue={'18'} name='type' label='age'>
          <Input placeholder='请输入年龄' />
</FormItem>

被设置了 name 属性的 Form.Item 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：

1. 你不再需要也不应该用 onChange 来做数据收集同步（你可以使用 Form 的 onValuesChange），但还是可以继续监听 onChange 事件。

2. 你不能用控件的 value 或 defaultValue 等属性来设置表单域的值，默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新。

3. 你不应该用 setState，可以使用 form.setFieldsValue来动态改变表单值。