react使用hook封装一个search+input+checkbox组件

react使用hook封装一个search+input+checkbox组件

searchPro.jsx

import {
    
     Checkbox, Input } from "antd";
import React, {
    
     useEffect, useState } from "react";
import Styled from "styled-components";
const {
    
     Search } = Input;
const proDataAll = [
  {
    
     name:'项目1', value:'1',check:false},{
    
     name:'项目2', value:'2',check:false},{
    
     name:'项目3', value:'3',check:false},
  {
    
     name:'管理1', value:'11',check:false},{
    
     name:'管理2', value:'12',check:false},{
    
     name:'管理3', value:'13',check:false},
  {
    
     name:'业务1', value:'111',check:false},{
    
     name:'业务2', value:'业务112',check:false},{
    
     name:'业务3', value:'113',check:false},
  {
    
     name:'测试', value:'01',check:false},{
    
     name:'测试1', value:'02',check:false},{
    
     name:'测试2', value:'03',check:false},
]
export default function SearchPro(props) {
    
    
  const [proData, setProData ] = useState([])
  const [selectData, setSelectData ] = useState([])
  useEffect(()=>{
    
    
    setProData(proDataAll)
  },[])
  // 查询
  const onSearch = (value) => {
    
    
    // console.log('onSearch',value,"selectData",selectData);
    let resSelect = []
    if ( value ) {
    
    
      resSelect = proData && proData.length ? proData.filter(item => {
    
    
        if ( item.name.indexOf(value) > -1 || value === item.name ) {
    
    
          return item
        }
      }) : []
    } else {
    
    
      resSelect = [...proDataAll]
    }
    console.log('onSearch-resSelect',resSelect);
    setProData(resSelect)
  }
  // checkbox 勾选
  const onChange = ( e, item ) => {
    
    
    // console.log('onChange',e.target.checked,'item',item);
    let resSelect = [] // 设置选中的数据
    let resProData = [] // 设置选中的checkbox
    if ( e.target.checked ) {
    
    
      resSelect = [...selectData,{
    
    ...item, check:true }];
      resProData = proData && proData.length ? proData.map(it => {
    
    
        if ( it.value === item.value ) {
    
    
          it.check = true
        }
        return it
      }) : [];
    } else {
    
    
      resSelect = selectData && selectData.length ? selectData.filter(it => {
    
    
        if ( !e.target.checked && it.value !== item.value ) {
    
    
          return it
        }
      }) : [...selectData];
      resProData = proData && proData.length ? proData.map(it => {
    
    
        if ( it.value === item.value ) {
    
    
          it.check = false
        }
        return it
      }) : [];
    }
    // console.log('onChange-resSelect',resSelect);
    // console.log('resProData',resProData);
    setSelectData(resSelect)
    setProData(resProData)
  }
  return (
    <SearchProWrap>
      <Search
        placeholder="请输入"
        onSearch={
    
    onSearch}
        allowClear
        style={
    
    {
    
    
          width: 200,
        }}
      />
      <div className='mian'>
        <div className='main-left'>
          {
    
    
            proData && proData.length ? proData.map(item => {
    
    
              return (
                <div className='main-left-item' key={
    
    item.value}>
                  <div>{
    
    item.name}</div>
                  <div>
                   <Checkbox onChange={
    
    (event) => onChange(event,item)} checked={
    
    item.check}>
                    {
    
    /* { item.check ? 1 : 0 } */}
                    </Checkbox>
                  </div>
                </div>
              )
            }) : ''
          }
        </div>
        <div className='main-right'>
          {
    
    
            selectData && selectData.length ? selectData.map(item=>{
    
    
              return (
                <div key={
    
    item.value}>
                  {
    
     item && item.name ? item.name : '' }
                </div>
              )
            }) : ''
          }
        </div>
      </div>
    </SearchProWrap>
  );
}

const SearchProWrap = Styled.div`
  color: #000;
  .mian {
    display: flex;
    width: 650px;
    margin-top: 20px;
    .main-left {
      width:400px;
      background: #eee;
      margin-right: 20px;
      .main-left-item {
        display: flex;
        justify-content: space-between;
        padding: 4px 10px;
        margin-bottom: 10px;
      }
    }
    .main-right {
      width: 200px;
      background: #eee
    }
  }
`;

使用组件

import React from 'react';
import SearchPro from "./SearchPro";
export default function app(props) {
    
    
    return (
      <div>
      <SearchPro />
     </div>
    )
}

效果