reactjs - 从 React-Final-Form 中的字段验证函数访问所有表单值

Question

我正在创建 React-Final-Form 字段组件的包装版本，本质上是创建可共享类型的字段以加快我公司的开发速度。作为其中的一部分，我想创建一组复选框，要求至少选中一个 - 但是当我尝试编写验证函数时，我似乎只能访问当前字段。

1. 根据其他一些答案和 API 文档，我认为验证函数接收了三个参数 - validateMyField(value, allValues, fieldState)。

当我将函数传递给给定字段时，我得到以下结果:

const mustPickAtLeastOne = (value, allValues, fieldState) => {
  console.log(value) //output: false
  console.log(allValues) //output: undefined
  console.log(fieldState) //output: undefined
}

我只需将标记类添加到我的复选框字段，然后使用如下所示的验证函数即可获得验证功能:

const mustPickAtLeastOne = () => {
  const numberChecked = document.querySelectorAll("." + markerclass + " input[type=\"checkbox\"]:checked").length;
  return (numberChecked === 0 ? atLeastOneRequiredMsg : undefined);
}

从浏览器的角度来看，这个选项是有效的，但味道很糟糕(既因为我试图直接与底层 DOM 节点交互，又因为我无法通过 Jest/Enzyme 测试它 - 所以我缺少单元测试覆盖率以了解我将来是否会破坏这个)。

我正在使用 React-Final-Form 6.3.0/Final-Form 4.16.1 - 其他地方有问题吗？或者为什么我无法在验证函数中获取 allValues？或者是否有一种完全更好的方法来实现我的“至少需要其中一个”验证？

Answer 1

不幸的是，我是从 https://codesandbox.io/s/k10xq99zmr 的示例开始的。 (利用 composeValidators 函数) - 因为我希望允许组件的使用者提供自定义验证函数，并且让组件本身具有一个或多个内置验证(然后将上述所有内容组合起来)传递给下级字段验证属性)...这意味着答案就在我面前:

//...
const composeValidators = (...validators) => value =>
  validators.reduce((error, validator) => error || validator(value), undefined);
///...

我将其更正为使用以下内容:

//...
const composeValidators = (...validators) => (value, allValues, fieldState) =>
  validators.reduce((error, validator) => error || validator(value, allValues, fieldState), undefined);
///...

这意味着，尽管底层 Final-Form 实现为每个分配的验证器函数提供了所有三个参数，但我对 composeValidators 示例的使用是传递当前字段值......同时丢弃/忽略其他两个。