react使用hook封装一个search+input+checkbox组件_react 封装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
    }
  }
`;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

使用组件

import React from 'react';
import SearchPro from "./SearchPro";
export default function app(props) {
    return (
      <div>
      <SearchPro />
     </div>
    )
}
1
2
3
4
5
6
7
8
9

效果