如何禁用引用输入组件值变更时的校验请求？

方法1：关闭组件的自动校验触发 #

多数带校验逻辑的表单组件会提供配置项，直接禁用值变更时的校验触发即可。比如设置validateOnChange属性为false：

<ReferenceInput
  source="targetField"
  reference="yourResource"
  validateOnChange={false}
/>

方法2：自定义校验规则覆盖默认逻辑 #

如果无法直接关闭校验，就替换掉默认的校验逻辑，只针对你需要的非ID值做校验，跳过触发请求的步骤：

const customValidator = (value) => {
  // 仅校验你关注的规则，比如非空、格式合规
  if (!value) return '该字段不能为空';
  // 不执行原有的请求式校验
  return undefined;
};

<ReferenceInput
  source="targetField"
  reference="yourResource"
  validate={[customValidator]}
/>

方法3：拦截并取消校验请求 #

如果组件硬编码了请求逻辑，可在请求层面拦截识别。比如用axios拦截器判断请求特征后取消：

axios.interceptors.request.use(config => {
  // 通过URL、参数等特征识别该校验请求
  if (config.url.includes('your-validation-api-path')) {
    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
    config.cancelToken = source.token;
    source.cancel('取消不必要的校验请求');
  }
  return config;
});

方法4：封装组件重写变更逻辑 #

如果以上方法都不适用，自己封装一层ReferenceInput，重写onChange方法跳过校验请求触发：

const CustomReferenceInput = (props) => {
  const { onChange, ...restProps } = props;
  
  const handleValueChange = (value) => {
    // 仅更新字段值，不触发原组件的校验请求逻辑
    onChange(value);
  };

  return <ReferenceInput {...restProps} onChange={handleValueChange} />;
};

内容的提问来源于stack exchange，提问作者Dimitri Kopriwa