Antd tree Multi-TreeSelect 区分标签和标题答案

【问题标题】：Antd tree Multi-TreeSelect make difference between labels and titlesAntd tree Multi-TreeSelect 区分标签和标题
【发布时间】：2020-05-03 17:06:03
【问题描述】：

我使用 antd 4.1.2 和 reactjs 16.12.0。

是否可以显示与标题不同的标签？

图片显示了我想要的结果。

谢谢

【问题讨论】：

请出示您的代码

标签： reactjs antd multi-select

【解决方案1】：

您可以定义一个valueLabelMap 并将其与TreeSelect 的onChange 处理程序结合使用来设置自定义标签。

参见 CodeSandbox 示例：

https://codesandbox.io/s/antdesign-treeselect-custom-valuelabelmap-rf6e1?file=/index.js

片段：

const valueLabelMap = {
  "parent 1": "parent1 label",
  "parent 1-0": "parent 1-0 label",
  leaf1: "my leaf label",
  leaf2: "your leaf label",
  "parent 1-1": "parent 1-1 label",
  foo: "bar"
};

class Demo extends React.Component {
  state = {
    value: undefined
  };

  onChange = (value, labelList, extra) => {
    console.log(value, labelList, extra);
    this.setState({
      value: value.map(ele => {
        if (valueLabelMap[ele]) {
          return valueLabelMap[ele];
        } else {
          return ele;
        }
      })
    });
  };

  render() {
    return (
      <TreeSelect
        showSearch
        style={{ width: "100%" }}
        value={this.state.value}
        dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
        placeholder="Please select"
        allowClear
        multiple
        treeDefaultExpandAll
        onChange={this.onChange}
      >
        <TreeNode value="parent 1" title="parent 1">
          <TreeNode value="parent 1-0" title="parent 1-0">
            <TreeNode value="leaf1" title="my leaf" />
            <TreeNode value="leaf2" title="your leaf" />
          </TreeNode>
          <TreeNode value="parent 1-1" title="parent 1-1">
            <TreeNode
              value="foo"
              title={<b style={{ color: "#08c" }}>foo</b>}
            />
          </TreeNode>
        </TreeNode>
      </TreeSelect>
    );
  }
}

【讨论】：