react 级联选择框的回显处理

最新推荐文章于 2024-09-03 08:33:35 发布

Zoker-chen

最新推荐文章于 2024-09-03 08:33:35 发布

阅读量810

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_41620887/article/details/129984965

版权

文章描述了在React应用中处理级联选择多选框的回显问题。通过`findPathById`函数查找从后端获取的id对应的包括父级id的二维数组，然后使用`form.setFieldsValue`更新表单状态以实现回显。代码示例展示了如何在组件中使用Cascader组件，并定义了处理选中项变化及回显的逻辑。

摘要由CSDN通过智能技术生成

react 级联选择框的回显处理

级联选择多选框

  <Form.Item label="设置热门标记" name="hot">
          <Cascader
            style={{ width: '100%' }}
            popupClassName="cascader-wrapper"
            options={props.menuList}
            placeholder="请选择"
            multiple
            maxTagCount={3}
            maxTagTextLength={4}
            showCheckedStrategy={SHOW_CHILD}
            getPopupContainer={(triggerNode) => triggerNode.parentNode}
            fieldNames={{
              label: 'name',
              value: 'id',
              children: 'child_category',
            }}
            onChange={(value, selectedOptions) => {
              handleSelect(value, selectedOptions, 'hot');
            }}
          />
      </Form.Item>

数据回显：因为从后端拿到的id是当前选中的id，需要找到父级的id并生成二维数组

//用来获取级联选择框选中的值的 
  function findPathById(id: number, menuList: any) {
    for (let i = 0; i < menuList.length; i++) {
      const menu = menuList[i];
      if (menu.id === id) {
        return [menu.id];
      } else if (menu.child_category) {
        const childPath: any = findPathById(id, menu.child_category);
        if (childPath) {
          return [menu.id, ...childPath];
        }
      }
    }
    return null;
  }

级联选择框回显需要一个包含父级id的二位数组，所以通过findPathById方法找到他的根元素id

后端返回的数组 [13,16,18] ===>级联选择框需要回显的数组 [ [ 2 , 13 ] , [ 2 , 16 ] , [ 2 , 18 ] ]

//回显
  useEffect(() => {
    if (props.showModal) {
      getModuleMark();
    } else {
      form.resetFields();
    }
  }, [props.showModal]);
// 获取模块标记
  const getModuleMark = async () => {
    const typeList = { 1: 'hot', 2: 'recommend', 3: 'news' };
    try {
      const res: any = await $http.reqGetModuleMark();
      if (res.code === 0) {
        res.data.forEach((item: any) => {
          const values = item.category_ids.map((v: any) => {
            return findPathById(v, props.menuList);
          });
          form.setFieldsValue({ [typeList[item.type]]: values });
        });
      }
    } catch (e) {
      console.log(e);
    }
  };