修改 antd 表单默认值

需求：添加一个可切换的按钮，当按钮切换时，antd 表单某一项变为默认的固定值且不能更改（以下代码已脱敏），且可以根据接口数据回显。

线上 demo，可点击预览

需要注意的是：initialValues 不能被 setState 动态更新，可以使用 form.setFieldsValue 来动态改变表单值。

添加一个可切换的按钮:

// originData：数据源
// 回显：useState(originData?.device[0] === 'pc' ? 'pc' : 'phone');
const [platform, setPlatform] = useState('');
const [form] = Form.useForm(); // ❗❗❗

function onChange(e: any) {
  let res = e.target.value;
  setPlatform(res);
}

<Radio.Group onChange={(e) => onChange(e)} value={platform}>
  <Radio.Button value="phone">手机</Radio.Button>
  <Radio.Button value="pc">电脑</Radio.Button>
</Radio.Group>

表单：

<Form
  form={form} // ❗❗❗
  name="basic"
  // ❗❗❗ 回显：表单默认值，使用数据源替换{ select: 'phone' }
  initialValues={{ select: 'phone' }} 
>
  <Form.Item name="select">
    // 监听platform 改变成pc时，触发表单disabled禁用输入
    <Select disabled={platform === 'pc'} mode="tags">
      <Option value="1">{platform}</Option>
    </Select>
  </Form.Item>
</Form>

监听 platform，当变成 pc 时，使用 form.setFieldsValue ()，触发表单更改成默认值：

useEffect(() => {
  if (platform === 'pc') {
    /**
     * ❗❗❗
     *   你不能用控件的 value 或 defaultValue 等属性来设置表单域的值，
     * 默认值可以用 Form 里的 initialValues 来设置。
     * 注意 initialValues 不能被 setState 动态更新，
     * 你需要用 setFieldsValue 来更新。
     *   你不应该用 setState，可以使用 form.setFieldsValue 来动态改变表单值。
     */
    form.setFieldsValue({ select: 'pc' });
    /**
     * ❗❗❗
     * 对表单进行更改后可以使用：
     * let res = form.getFieldsValue(true)
     * 以获取表单各项的值，将其传递给父组件并进行数据提交
     */
  } else {
    /**
     * ❗❗❗
     * 回显：此处-->{ select: 'phone' }，使用数据源替换
     */
    form.setFieldsValue({ select: 'phone' });
  }
}, [platform]);