React封装支持多选搜索的表格弹框组件--SelectTableModal组件

本文链接：https://blog.youkuaiyun.com/html5_mylove/article/details/121742797

本文介绍如何在React中封装一个支持多选和搜索功能的表格弹框组件SelectTableModal，包括需求分析、组件封装过程及实际使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、需求

弹框选择：
在这里插入图片描述

二、组件封装

import React, {
    PureComponent } from 'react';
import PropTypes from 'prop-types';
import {
    Row, Col, Modal, Input, Button, Divider, Card, Table, message } from 'antd';
import styles from './index.less';

const Search = Input.Search;

class SelectTableModal extends PureComponent {
   
  constructor(props) {
   
    super(props);
    const {
    initSelectedData, useKey } = props;
    this.state = {
   
      isSearch: false, //是否搜索
      sourceDataSearched: [],
      selectedRows:
        Array.isArray(initSelectedData) && initSelectedData.length > 0 ? initSelectedData : [],
    };
  }
  componentDidMount() {
   }

  // 搜索
  handleSearch = e => {
   
    const {
    sourceData, sourceColumns, showUseName, dispatch, dispatchType } = this.props;
    const searchValue = e.target.value;
    let sourceDataSearched = sourceData;

    if (dispatch && dispatchType) {
   
      return dispatch({
   
        type: dispatchType,
        payload: searchValue,
        success: data => {
   
          this.setState({
    isSearch: searchValue ? true : false, sourceDataSearched: data });
        },
      });
    }
    if (searchValue) {
   
      sourceDataSearched = sourceData.filter(row => {
   
        let exist = false;
        for (let i = 0; i < sourceColumns.length; i++) {
   
          let column = sourceColumns[i];
          if (row[column.dataIndex] && row[column.dataIndex].includes(searchValue)) {
   
            exist = true;
            break;
          }
        }
        return exist;
      });
    }
    this.setState({
    isSearch: searchValue ? true : false, sourceDataSearched });
  };

  // 删除
  handleDel = (type, key) => {
   
    const {
    useKey }