antd TreeSelect 勾选父级带子集 勾选子集不控制父级

本文介绍了如何在React应用中使用AntDesign库中的TreeSelect组件,展示了一个示例,包括状态管理、节点选择处理和树形结构的遍历。
摘要由CSDN通过智能技术生成
import React, { useState, useEffect } from 'react';
import './index.css';
import { TreeSelect } from 'antd';

const { SHOW_ALL } = TreeSelect;

const treeData = [
  {
    title: 'Node1',
    value: '0-0',
    key: '0-0',
    children: [
      {
        title: 'Child Node1',
        value: '0-0-0',
        key: '0-0-0',
      },
    ],
  },
  {
    title: 'Node2',
    value: '0-1',
    key: '0-1',
    children: [
      {
        title: 'Child Node3',
        value: '0-1-0',
        key: '0-1-0',
        children: [
          {
            title: 'Child Node33',
            value: '0-1-0-0',
            key: '0-1-0-0',
          },
          {
            title: 'Child Node44',
            value: '0-1-0-1',
            key: '0-1-0-1',
          },
          {
            title: 'Child Node55',
            value: '0-1-0-2',
            key: '0-1-0-2',
          }
        ]
      },
      {
        title: 'Child Node4',
        value: '0-1-1',
        key: '0-1-1',
      },
      {
        title: 'Child Node5',
        value: '0-1-2',
        key: '0-1-2',
      },
    ],
  },
];

const App: React.FC = () => {
  const [value, setValue] = useState(['0-0-0']);

  const onChange = (newValue: string[], label, extra) => {
    setValue(newValue);
  };
  const childrenValuePush = (node) => {
    if (node.children) {
      for (let i = 0; i<node.children.length; i++) {
        setValue(pre=>[...pre, node.children[i]])
        childrenValuePush(node.children[i])
      }
    } else {
      return
    }
  }
  const onSelect = (_, node, extra) => {
    childrenValuePush(node)
  };
  useEffect(()=>{
    console.log(value, value)
  }, [value])
  const tProps = {
    treeData,
    value,
    onChange,
    onSelect,
    treeCheckStrictly: true,
    treeCheckable: true,
    showCheckedStrategy: SHOW_ALL,
    placeholder: 'Please select',
    style: {
      width: '100%',
    },
  };

  return <TreeSelect {...tProps} />;
};

export default App;
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weixin_45456092

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值