from表单验证组件自定义

antd在表单验证时会用到getFieldDecorator方法

<Form.Item label="角色名称">
    {getFieldDecorator('role', {
        initialValue: initRole,
        rules: [
            {
            required: true,
            message: '请输入角色名称',
            },
        ],
    })(<Input placeholder="请输入角色名称" />)}
</Form.Item>

当使用自定义组件或第三方表单控件时，getFieldDecorator就到不到预期的验证效果了，因为该组件需要遵循以下几个规则：

1. 提供受控属性 value 或其它与 valuePropName 的值同名的属性。
2. 提供 onChange 事件或 trigger 的值同名的事件。
3. 不能是函数式组件。

import { Tree } from 'antd'
import React from 'react'
const { TreeNode } = Tree
interface IProps {
  value?: any
  treeData?: any
  onChange?: (obj: any) => void
}
interface IState {
  value: []
}
export default class TreeBetter extends React.Component<IProps, IState> {
  treeData: any
  constructor(props) {
    super(props)
    this.treeData = props.treeData
    this.state = {
      value: [],
    }
  }

  onCheck = value => {
    this.setState({ value })
    this.props.onChange(value)
  }

  renderTreeNodes = data =>
    data.map(item => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        )
      }
      return <TreeNode key={item.key} {...item} />
    })

  render() {
    return (
      <Tree checkable onCheck={this.onCheck} checkedKeys={this.props.value}>
        {this.renderTreeNodes(this.treeData)}
      </Tree>
    )
  }
}