Antd Tree如何在Form 表单里做校验

困惑：我明明选择了菜单呀，但是form就是无法获取tree组件的值？相信很多人遇到过这种问题。也有很多组件也有这种问题不好做校验。 原因就是： Tree不受Form control

解决方案： 用ref 加在组件上获取他的state,然后用自定义校验validator

  const treeRef=useRef();
      <Form.Item
            label="菜单授权"
            name="menuIdList"
            rules={[
              { required: true, message: '请选择菜单' },
              {
                validator: (rule, value, callback) => {
                  if (treeRef.current?.state.checkedKeys.length === 0) {
                    callback(new Error('请选择菜单') );
                  } else {
                    callback();
                  }
                },
              },
            ]}
          >
            <Tree
              ref={treeRef}
              checkable
              fieldNames={{
                title: 'name',
                key: 'id',
              }}
              onCheck={onCheck}
              treeData={formatData(data?.list)}
            />
          </Form.Item>

完美解决！！！适用于很多不受Form控制的组件。