律师行业做网站的必要性,建设网站郑州,建站公司用哪家服务器,网站如何生成app在写一个表单时使用了antd的 TreeSelect#xff0c;在对TreeSelect的值提交时发现#xff0c;父节点的值在半选状态时未提交#xff0c;在选中状态时#xff08;子节点全选#xff09;#xff0c;子节点不提交#xff0c;只提交父节点#xff0c;这与后端需求不符…在写一个表单时使用了antd的 TreeSelect在对TreeSelect的值提交时发现父节点的值在半选状态时未提交在选中状态时子节点全选子节点不提交只提交父节点这与后端需求不符后端要求提交全部的节点所有手动改造了一下以适应需求组件代码如下
import { TreeSelect } from antd;
import React, { useState, useEffect } from react;export type FromTreeItem {key?: number | string;title?: string;parentKey?: number | string;value?: number | string;children?: FromTreeItem[];
};export type FromTreeSelectProps {value?: any;treeData?: FromTreeItem[];onChange?: (value: any) void;
};/** * 解决antd TreeSelect 返回值不包含父节点问题 * param props * returns */
const FromTreeSelect: React.FCFromTreeSelectProps (props) {const [selectedKeys, setSelectedKeys] useState(string | number)[]([]);const [treeDataMap, setTreeDataMap] useStateRecordstring | number, FromTreeItem({});const treeToMap (tree: FromTreeItem[]): Recordstring | number, FromTreeItem {const map: Recordstring | number, FromTreeItem {};const traverse (nodes: FromTreeItem[]) {nodes.forEach(node {node.key ? map[node.key] node : null; // 将当前节点添加到映射中 if (node.children) {traverse(node.children); // 递归遍历子节点 }});};traverse(tree); // 从根节点开始遍历 return map;};useEffect(() {if (props.treeData)setTreeDataMap(treeToMap(props.treeData))}, [props.treeData]);useEffect(() {// 初始化 selectedKeys if (props.value treeDataMap) {setSelectedKeys(getAllChildrenKey(props.value));}}, [treeDataMap, props.value]);/** * 根据选中的key找到所有父节点key并一起返回 * param selectKeys */const getAllNodeKey (selectKeys: (string | number)[]): (string | number)[] {const allKeys new Setstring | number(selectKeys);;const traverse (node: FromTreeItem) {if (node.parentKey) {allKeys.add(node.parentKey)traverse(treeDataMap[node.parentKey])}};selectKeys.forEach(key {traverse(treeDataMap[key])});return Array.from(allKeys);};/** * 根据给定的值 找到给定节点是否选中了子节点如选中了子节点则删除当前节点* param keys * param tree */const getAllChildrenKey (keys: (string | number)[]): (string | number)[] {if (!keys)return []const allKeys new Setstring | number(keys);keys.forEach(key {const node: FromTreeItem treeDataMap[key];if (node.children) {node.children.forEach((child) {if (node.key allKeys.has(node.key) child.key allKeys.has(child.key)) {allKeys.delete(node.key)}});}})return Array.from(allKeys);};const handleChange (newKeys: (string | number)[]) {setSelectedKeys(newKeys);if (props.onChange) {props.onChange(getAllNodeKey(newKeys));}};const { SHOW_ALL } TreeSelect;return (TreeSelecttreeCheckabletreeData{props.treeData}value{selectedKeys}onChange{handleChange}showCheckedStrategy{SHOW_ALL}/);
};export default FromTreeSelect;
使用方式同antd的其他组件如 Form.Itemname{menuIds}label{菜单}rules{[{ required: true }]}FromTreeSelect treeData{menuTreeData} //Form.Item
