【React-admin】构建React应用（10）- 基于antd的复杂表单校验/自定义组件校验

From表单的检验是前端绕不开的话题，使用Antd的时候，其自带的表单会带有校验功能，但是在某些情况下是不能满足我们的需求的，这种情况下，我们就需要自定义一些校验。

比如我要实现这种方式的校验：

我需要在表单中校验这么一个组件，组件中包含了三个下拉框，需要对三个下拉框中的值进行联合校验，那么它不是简单地表单项校验，就需要额外的自己去定义这个复杂的表单项的校验。最终实现的效果应该是这样：

在表单提交，或者选项值发现变化的时候，需要去自动校验是否符合规则。

在Antd官网上提到了这么一种关于复杂组件的自定义校验方式戳这里

其中提到：

自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件遵循以下的约定：

• 提供受控属性 value 或其它与 valuePropName 的值同名的属性。
• 提供 onChange 事件或 trigger 的值同名的事件。

这么看来官方是支持我们去校验第三方组件的，只要遵循它的约定即可。官方给出的示例代码中是可以直接拿来用的，那我为什么还要在这里强调呢？

因为在组件调用时，时常会出现参数传递的情况，那么我们就需要将父组件的参数传递过来，这点是官方没有提到的，如下：

const PriceInput = ({
   
    value = {
   
   }, onChange }) => {
   
   }

如果你不需要额外的参数传递的话，那么可以这么直接这么搞。但是如果牵扯到数据传递比如说下拉框，列表等其他需要数据准备的控件就需要你从父组件中传递额外的参数了。

最初我的设想是这样的

// 自定义校验组件
const RemoteCheck = (props, {
   
    value = {
   
   }, onChange }) => {
   
   }

但是在使用到triggerChange触发change事件的时候，就会出现onChange未定义的情况，而报错。

仔细想了一下，觉得组件的传递数据，包含自定义参数与第三方组件的参数都应该所属于props，因为无论是什么组件，在react中必须要遵守单向数据流的形式：即父组件可以通过props向子组件传递