用js、react写了一个带搜索框的多选择器，附完整代码（最新更新：找到了一个类似的组件）_前端小白成长记

一、自己写的组件

效果图

完整代码

App.js

import React, { Component } from "react";
import { Input, Checkbox } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import _ from "lodash";
import "antd/dist/antd.css";
import "./App.css"
const selectData = ["test1","test2","test3","test4"];
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectValues: ["test1","test2","test3","test4"],
      inputValue: "",
      showCheckGroup: false,
      indeterminate: true,
      checkAll: true
    };
    this.deleteSelectSiteId = this.deleteSelectSiteId.bind(this);
    this.onSelectChange = this.onSelectChange.bind(this);
  }
  componentDidMount(){
    this.setState({indeterminate:selectData.length===this.state.selectValues.length?false:true,
      checkAll:!_.isEmpty(selectData)&!_.isEmpty(this.state.selectValues)&selectData.length===this.state.selectValues.length?true:false})
  }
  onSelectChange(value) {
    console.log("value===value.length",value,value.length);
    console.log("this.selectData",selectData)
    this.setState({
      selectValues: value,
      indeterminate: !!value.length && value.length < selectData.length,
      checkAll: value.length === selectData.length,
    });
  }
  handleInputChange(data) {
    console.log("data", data)
    this.setState({ inputValue: data })
  }
  deleteSelectSiteId(key) {
    const newSelectValues = this.state.selectValues;
    newSelectValues.splice(key, 1);
    this.setState({ selectValues: newSelectValues, inputValue: "" });
  }
  renderValueItem({ value, key }) {
    return (
      <div
        key={key}
        className="selectBox"
      >
        <span className="selectValue">{value}</span>{' '}
        <CloseOutlined
          className="CloseOutlined"
          onClick={() => this.deleteSelectSiteId(key)}
        />
      </div>
    );
  }
  onCheckAllChange = e => {
    console.log("e.target.checked",e.target.checked)
    this.setState({
      inputValue: "",
      indeterminate: false,
      checkAll: e.target.checked,
    });
    if (e.target.checked) {
      this.setState({ selectValues: selectData });
    } 
    else {
      this.setState({ selectValues: [""] });
    }
  };
  render() {
    return (
      <div className="selectContainer"
        onClick={() => { this.setState({ showCheckGroup: true }) }}
      >
        <div className="selectValuesBox">
          {
            this.state.selectValues.length > 0 ?
              this.state.selectValues.map((value, key) => {
                return this.renderValueItem({ value, key });
              })
              : <div className="blanck_SelectBox"></div>
          }
        </div>
        {
          this.state.showCheckGroup &&
          <div className="CheckboxGroupBox" 
            onMouseLeave={(e) => { this.setState({ showCheckGroup: false }) }}
          >
            <Input className="selectInputSearch" placeholder="Type to Search" onChange={(e, data) => { this.handleInputChange(e.target.value) }} />
            <Checkbox
              indeterminate={this.state.indeterminate}
              onChange={this.onCheckAllChange}
              checked={this.state.checkAll}
              style={
   import Reac