我正在创建 React-Final-Form 字段组件的包装版本,本质上是创建可共享类型的字段以加快我公司的开发速度。作为其中的一部分,我想创建一组复选框,要求至少选中一个 - 但是当我尝试编写验证函数时,我似乎只能访问当前字段。
- 根据其他一些答案和 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?或者是否有一种完全更好的方法来实现我的“至少需要其中一个”验证?
最佳答案
不幸的是,我是从 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 示例的使用是传递当前字段值......同时丢弃/忽略其他两个。
关于reactjs - 从 React-Final-Form 中的字段验证函数访问所有表单值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57165613/