Antd 定制下拉框回显内容

 

效果图

 

<div id="container" style="padding: 24px"></div>
<script>
  var mountNode = document.getElementById('container');
</script>

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { TreeSelect } from "antd";

const { TreeNode } = TreeSelect;

class Demo extends React.Component {
  state = {
    values: [],
    titles: []
  };

  onChange = (values, titles, extra) => {
    console.log(values);
    this.setState({ values, titles });
  };

  render() {
    let { values, titles } = this.state;
    let placeholder = "";
    if (titles.length === 1) {
      placeholder = titles[0];
    } else {
      placeholder = `苏南${titles.length}市`;
    }

    return (
      <TreeSelect
        multiple
        showSearch
        allowClear
        treeCheckable
        treeDefaultExpandAll
        value={values}
        onChange={this.onChange}
        maxTagCount={0}
        maxTagPlaceholder={placeholder}
        placeholder="Please select"
        style={{ width: "100%" }}
        dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
      >
        <TreeNode value="0" title="苏锡常">
          <TreeNode value="1" title="苏州" style={{ marginLeft: -18 }} />
          <TreeNode value="2" title="无锡" style={{ marginLeft: -18 }} />
          <TreeNode value="3" title="常州" style={{ marginLeft: -18 }} />
        </TreeNode>
      </TreeSelect>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById("container"));