devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

用js、react写了一个带搜索框的多选择器，附完整代码（最新更新：找到了一个类似的组件）_js怎么自定义搜索框多选组件实现

作者：我家小花儿 | 2024-07-06 05:17:07

赞

踩

js怎么自定义搜索框多选组件实现

一、自己写的组件

效果图

完整代码

App.js

  1. import React, { Component } from "react";
  2. import { Input, Checkbox } from 'antd';
  3. import { CloseOutlined } from '@ant-design/icons';
  4. import _ from "lodash";
  5. import "antd/dist/antd.css";
  6. import "./App.css"
  7. const selectData = ["test1","test2","test3","test4"];
  8. class App extends Component {
  9.   constructor(props) {
  10.     super(props);
  11.     this.state = {
  12.       selectValues: ["test1","test2","test3","test4"],
  13.       inputValue: "",
  14.       showCheckGroup: false,
  15.       indeterminate: true,
  16.       checkAll: true
  17.     };
  18.     this.deleteSelectSiteId = this.deleteSelectSiteId.bind(this);
  19.     this.onSelectChange = this.onSelectChange.bind(this);
  20.   }
  21.   componentDidMount(){
  22.     this.setState({indeterminate:selectData.length===this.state.selectValues.length?false:true,
  23.       checkAll:!_.isEmpty(selectData)&!_.isEmpty(this.state.selectValues)&selectData.length===this.state.selectValues.length?true:false})
  24.   }
  25.   onSelectChange(value) {
  26.     console.log("value===value.length",value,value.length);
  27.     console.log("this.selectData",selectData)
  28.     this.setState({
  29.       selectValues: value,
  30.       indeterminate: !!value.length && value.length < selectData.length,
  31.       checkAll: value.length === selectData.length,
  32.     });
  33.   }
  34.   handleInputChange(data) {
  35.     console.log("data", data)
  36.     this.setState({ inputValue: data })
  37.   }
  38.   deleteSelectSiteId(key) {
  39.     const newSelectValues = this.state.selectValues;
  40.     newSelectValues.splice(key, 1);
  41.     this.setState({ selectValues: newSelectValues, inputValue: "" });
  42.   }
  43.   renderValueItem({ value, key }) {
  44.     return (
  45.       <div
  46.         key={key}
  47.         className="selectBox"
  48.       >
  49.         <span className="selectValue">{value}</span>{' '}
  50.         <CloseOutlined
  51.           className="CloseOutlined"
  52.           onClick={() => this.deleteSelectSiteId(key)}
  53.         />
  54.       </div>
  55.     );
  56.   }
  57.   onCheckAllChange = e => {
  58.     console.log("e.target.checked",e.target.checked)
  59.     this.setState({
  60.       inputValue: "",
  61.       indeterminate: false,
  62.       checkAll: e.target.checked,
  63.     });
  64.     if (e.target.checked) {
  65.       this.setState({ selectValues: selectData });
  66.     } 
  67.     else {
  68.       this.setState({ selectValues: [""] });
  69.     }
  70.   };
  71.   render() {
  72.     return (
  73.       <div className="selectContainer"
  74.         onClick={() => { this.setState({ showCheckGroup: true }) }}
  75.       >
  76.         <div className="selectValuesBox">
  77.           {
  78.             this.state.selectValues.length > 0 ?
  79.               this.state.selectValues.map((value, key) => {
  80.                 return this.renderValueItem({ value, key });
  81.               })
  82.               : <div className="blanck_SelectBox"></div>
  83.           }
  84.         </div>
  85.         {
  86.           this.state.showCheckGroup &&
  87.           <div className="CheckboxGroupBox" 
  88.             onMouseLeave={(e) => { this.setState({ showCheckGroup: false }) }}
  89.           >
  90.             <Input className="selectInputSearch" placeholder="Type to Search" onChange={(e, data) => { this.handleInputChange(e.target.value) }} />
  91.             <Checkbox
  92.               indeterminate={this.state.indeterminate}
  93.               onChange={this.onCheckAllChange}
  94.               checked={this.state.checkAll}
  95.               style={{ marginLeft: 8 }}
  96.             >
  97.               All
  98.             </Checkbox>
  99.             <br />
  100.             <Checkbox.Group
  101.               className="CheckboxGroup"
  102.               onChange={this.onSelectChange}
  103.               value={this.state.selectValues}
  104.             >
  105.               {selectData.map((sel, i) => {
  106.                 return (
  107.                   <Checkbox className="Checkbox" value={sel} key={"select" + i} style={{
  108.                     display: _.isEmpty(this.state.inputValue) ? "block"
  109.                       : sel.indexOf(this.state.inputValue) === -1 ? "none"
  110.                         : "block"
  111.                   }
  112.                   }>
  113.                     {sel}
  114.                   </Checkbox>
  115.                 );
  116.               })}
  117.             </Checkbox.Group>
  118.           </div>
  119.         }
  120.       </div>
  121.     );
  122.   }
  123. }
  124. export default App;

App.css

  1. .selectContainer{position: relative;border: 1px solid #d9d9d9;border-radius: 4px;height: 32px;padding: 0 15px 0 10px;display: inline-block;}
  2. .selectBox{ background-color: #fafafa;padding: 0 10px 0 10px;border: 1px solid #e8e8e8;
  3.   border-radius: 2px;display: inline-block;margin-left: 5px}
  4. .CloseOutlined{color: rgba(0, 0, 0, 0.45); font-weight: bold; font-size: 12px;}
  5. .selectValue{font-size: 14px; color: rgba(0, 0, 0, 0.65);
  6.   margin-right: 4px;
  7.   height: auto;}
  8. .selectValuesBox{margin-top: 3px;}
  9. .Checkbox{margin-left: 8px;}
  10. .CheckboxGroupBox{margin-top: 4px;margin-left: -12px;background-color: #fff;z-index: 999;
  11.   position: absolute;border: 1px solid #d9d9d9;top: 100%;border-radius: 4px;width:240px;
  12. }
  13. .selectInputSearch{width: 214px;margin-top: 20px;margin-bottom: 10px;margin-left: 8px;border-radius: 4px;}
  14. .blanck_SelectBox{display: inline-block;margin-left: 5px;padding: 0 10px 0 10px;}

二、网上找到了一个比较简洁好用的组件

App.js

  1. import React, { Component } from "react";
  2. import MultiSelect from "react-multi-select-component";
  3. import "./App.css"
  4. const options = [
  5.   { label: "Grapes 
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/791930
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。