antd React表多个过滤器

Question

我正在尝试在antd表中使用多重过滤器。 例如，只有一个过滤器，但我需要3个过滤器：https://ant.design/components/table/#components-table-demo-custom-filter-panel

在所有情况下都搜索制作RegExp。 这是我的组件，电话和电子邮件中的过滤器无法正常工作：

    import React, { Component } from 'react';
import { connect } from 'react-redux';

import { Table, Input, Button, Icon } from 'antd';
import { mockData } from '../../../mockData';

class ContactsTable extends React.Component {
  state = {
    filterDropdownVisible: false,
    data: mockData,
    searchTextName: '',
    searchTextPhone: '',
    searchTextEmail: '',
    filteredName: false,
    filteredPhone: false,
    filteredEmail: false,
    selectedRowKeys: [] // Check here to configure the default column
  };
  // выделение строк
  onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };
  // поиск по полю
  onInputChangeName = e => {
    this.setState({ searchTextName: e.target.value });
  };
  onInputChangePhone = e => {
    this.setState({ searchTextPhone: e.target.value });
  };
  onInputChangeEmail = e => {
    this.setState({ searchTextEmail: e.target.value });
  };
  onSearchName = () => {
    const { searchTextName } = this.state;
    const reg = new RegExp(searchTextName, 'gi');
    this.setState({
      filterDropdownVisible: false,
      filteredName: !!searchTextName,
      data: mockData
        .map(record => {
          const match = record.name.match(reg);
          // console.log('record.name', record.name);
          if (!match) {
            return null;
          }
          return {
            ...record,
            name: (
              <span>
                {record.name
                  .split(reg)
                  .map(
                    (text, i) =>
                      i > 0 ? [<span className="highlight">{match[0]}</span>, text] : text
                  )}
              </span>
            )
          };
        })
        .filter(record => !!record)
    });
  };
  onSearchPhone = () => {
    const { searchTextPhone } = this.state;
    const reg = new RegExp(searchTextPhone, 'gi');
    console.log('reg', reg);
    this.setState({
      filterDropdownVisiblePhone: false,
      searchTextPhone: !!searchTextPhone,
      data: mockData
        .map(record => {
          const match = record.name.match(reg);
          // console.log('record.name', record.phone);
          // console.log('match', record.phone.match(reg));
          if (!match) {
            return null;
          }
          return {
            ...record,
            phone: (
              <span>
                {record.name
                  .split(reg)
                  .map(
                    (text, i) =>
                      i > 0 ? [<span className="highlight">{match[0]}</span>, text] : text
                  )}
              </span>
            )
          };
        })
        .filter(record => !!record)
    });
  };
  onSearchEmail = () => {
    const { searchTextEmail } = this.state;
    const reg = new RegExp(searchTextEmail, 'gi');
    console.log('reg', reg);
    this.setState({
      filterDropdownVisibleEmail: false,
      searchTextEmail: !!searchTextEmail,
      data: mockData
        .map(record => {
          const match = record.email.match(reg);
          // console.log('record.name', record.phone);
          // console.log('match', record.phone.match(reg));
          if (!match) {
            return null;
          }
          return {
            ...record,
            email: (
              <span>
                {record.email
                  .split(reg)
                  .map(
                    (text, i) =>
                      i > 0 ? [<span className="highlight">{match[0]}</span>, text] : text
                  )}
              </span>
            )
          };
        })
        .filter(record => !!record)
    });
  };

  render() {
    const { loading, selectedRowKeys } = this.state;
    let { sortedInfo } = this.state;
    sortedInfo = sortedInfo || {};

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange
    };
    const hasSelected = selectedRowKeys.length > 0;
    const columns = [
      {
        title: 'ФИО',
        dataIndex: 'name',
        key: 'name',
        sorter: (a, b) => a.name - b.name,
        // sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
        filterDropdown: (
          <div className="custom-filter-dropdown">
            <Input
              ref={ele => (this.searchInputName = ele)}
              placeholder="поиск ФИО"
              value={this.state.searchTextName}
              onChange={this.onInputChangeName}
              onPressEnter={this.onSearchName}
            />
            <Button type="primary" onClick={this.onSearchName}>
              Поиск
            </Button>
          </div>
        ),
        filterIcon: (
          <Icon type="search" style={{ color: this.state.filteredName ? '#108ee9' : '#aaa' }} />
        ),
        filterDropdownVisibleName: this.state.filterDropdownVisibleName,
        onFilterDropdownVisibleChange: visible => {
          this.setState(
            {
              filterDropdownVisibleName: visible
            },
            () => this.searchInputName && this.searchInputName.focus()
          );
        }
      },
      {
        title: 'Телефон',
        dataIndex: 'phone',
        key: 'phone',
        sorter: (a, b) => a.phone - b.phone,
        filterDropdown: (
          <div className="custom-filter-dropdown">
            <Input
              ref={ele => (this.searchInputPhone = ele)}
              placeholder="поиск по телефону"
              value={this.state.searchTextPhone}
              onChange={this.onInputChangePhone}
              onPressEnter={this.onSearchPhone}
            />
            <Button type="primary" onClick={this.onSearchPhone}>
              Поиск
            </Button>
          </div>
        ),
        filterIcon: (
          <Icon type="search" style={{ color: this.state.filteredPhone ? '#108ee9' : '#aaa' }} />
        ),
        filterDropdownVisiblePhone: this.state.filterDropdownVisiblePhone,
        onFilterDropdownVisibleChange: visible => {
          this.setState(
            {
              filterDropdownVisiblePhone: visible
            },
            () => this.searchInputPhone && this.searchInputPhone.focus()
          );
        }
      },
      {
        title: 'Email',
        dataIndex: 'email',
        key: 'email',
        sorter: (a, b) => a.email - b.email,
        filterDropdown: (
          <div className="custom-filter-dropdown">
            <Input
              ref={ele => (this.searchInputEmail = ele)}
              placeholder="поиск Email"
              value={this.state.searchTextEmail}
              onChange={this.onInputChangeEmail}
              onPressEnter={this.onSearchEmail}
            />
            <Button type="primary" onClick={this.onSearchEmail}>
              Поиск
            </Button>
          </div>
        ),
        filterIcon: (
          <Icon type="search" style={{ color: this.state.filteredEmail ? '#108ee9' : '#aaa' }} />
        ),
        filterDropdownVisibleEmail: this.state.filterDropdownVisibleEmail,
        onFilterDropdownVisibleChange: visible => {
          this.setState(
            {
              filterDropdownVisibleEmail: visible
            },
            () => this.searchInputEmail && this.searchInputEmail.focus()
          );
        }
      },
      {
        title: 'Пол',
        dataIndex: 'gender',
        key: 'gender'
      },
      {
        title: 'Возраст',
        dataIndex: 'age',
        key: 'age',
        sorter: (a, b) => a.age - b.age
      }
    ];
    return (
      <Table
        rowSelection={rowSelection}
        columns={columns}
        dataSource={this.state.data}
        rowKey={record => record._id}
        pagination={{ pageSize: 20 }}
      />
    );
  }
}

export default ContactsTable;

我该如何解决这个问题？