时间戳

首页 > 解决方案 > 当 treeselect 具有空值时，它不会显示

reactjs - 当 treeselect 具有空值时，它不会显示

问题描述

我需要一个TreeNodein antd TreeSelect，才有一个值null。但是当它有一个值时null，它不会在TreeSelect

<Tree.TreeNode value={null} title="Head menu"/>

我该如何解决？

新建->

getSubSelectTree = (topMenuItem: TopMenuItem) => {
    if (topMenuItem.subMenu.length > 0) {
        let subMenuTreeNodes = [];
        for (let x = 0; x < topMenuItem.subMenu.length; x++) {
            subMenuTreeNodes.push(this.getSubSelectTree(topMenuItem.subMenu[x]));
        }
        return <Tree.TreeNode key={topMenuItem.id.toString()} title={topMenuItem.name}
                              value={topMenuItem.id}>{subMenuTreeNodes}</Tree.TreeNode>
    }
    return <Tree.TreeNode key={topMenuItem.id.toString()} title={topMenuItem.name} value={topMenuItem.id}
    />;
};

getSelectTree = () => {
    if (this.props.menuState.topMenu !== null) {
        if (!this.props.menuState.topMenu.loading) {
            let treeNodes = [];
            for (let x = 0; x < this.props.menuState.topMenu.menuItems.length; x++) {
                treeNodes.push(this.getSubSelectTree(this.props.menuState.topMenu.menuItems[x]));
            }
            return <TreeSelect
                placeholder="Selecteer onder welk menu item het moet komen."
                allowClear
            >
                <Tree.TreeNode value={"" + null} title={"Head menu"}/>
                {treeNodes}
            </TreeSelect>;
        }
    }
    return <></>;
};

这是我现在的代码。我唯一想要的是有一个额外的 TreeNode，它说它是一个主菜单，我在创建时不会有父级。在水下它是空的

标签： reactjstypescriptantd

解决方案

你的问题是TreeSelect，但你的代码是关于Tree. 不要混淆。

如果是TreeSelect， propvalue需要是objectorstring或false，而不是nullor undefined。每个都必须是唯一的。查看TreeNode演示，让我知道

render() {
    return (
      <TreeSelect
        showSearch
        style={{ width: "100%" }}
        value={this.state.value}
        dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
        placeholder="Please select"
        allowClear
        treeDefaultExpandAll
        onChange={this.onChange}
      >
        <TreeNode value="parent 1" title="parent 1" key="0-1">
          <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
            <TreeNode value={"" + undefined} title="my leaf" key="random" />
            <TreeNode value={"" + null} title="your leaf" key="random1" />
          </TreeNode>
          <TreeNode value="parent 1-1" title="parent 1-1" key="random2">
            <TreeNode
              value={false}
              title={<b style={{ color: "#08c" }}>sss</b>}
              key="random3"
            />
          </TreeNode>
        </TreeNode>
      </TreeSelect>
    );
  }

推荐阅读