【Antd】antd form表单的rules文案无法跟随状态重渲染的原因及解决办法-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Antd】antd form表单的rules文案无法跟随状态重渲染的原因及解决办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题背景

我有两个表单项，当我选择出库类型，调用onChange改变inOutType 状态，这时候发现这句代码不生效：

rules={[{ required: true, message: `请选择${Type === 1 ? '持有' : '负责'}` }]}

示例代码

<TypographyForm.Group>
        <TypographyForm.Item
          label="类型"
          name="Type"
          col={{ span: 24 }}
          rules={[{ required: true, message: '请选择类型' }]}
        >
          <Select placeholder="类型" loading={inApplyLoading} onChange={onInOutTypeChange}>
            {inApplyType &&
              inApplyType.data?.[3]?.map((item) => (
                <Select.Option value={item?.dictKey} key={item?.dictKey}>
                  {item?.dictValue}
                </Select.Option>
              ))}
          </Select>
</TypographyForm.Item>

<TypographyForm.Item
          label={Type === 1 ? '持有' : '负责'}
          name="holderCode"
          col={{ span: 24 }}
          rules={[{ required: true, message: `请选择${inOutType === 1 ? '持有' : '负责'}` }]}
        >
          <ContactsInput config={{ key: 'holderCode' }} />
</TypographyForm.Item>

原因

antd官方为了尽量少造成多余的渲染，把这个主动权交由开发者自己来实现，适配更多场景，得到相对优秀的渲染性能文章来源地址https://www.toymoban.com/news/detail-642230.html

解决代码

const onInOutTypeChange = (val) => {
    setType(val);
    // 清除指定字段的规则
    form.setFieldsValue({ holderCode: '' });
    handleValidateFields();
  };

  const handleValidateFields = () => {
    form
      .validateFields(['holderCode'])
      .then((values) => {
        // 校验成功后的操作
        console.log('校验通过', values);
      })
      .catch((errorInfo) => {
        // 校验失败后的操作
        console.log('校验失败', errorInfo);
      });
  };