Antd tree Multi-TreeSelect make difference between labels and titles

Question

I use antd 4.1.2 with reactjs 16.12.0.

Is it possible to display labels that will be different the titles?

The image shows the result I want.

Thank you

Answer 1

You could define a valueLabelMap and use it in combination with TreeSelect's onChange handler to set the custom label.

See CodeSandbox example:

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

Snippet:

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>
    );
  }
}