При нажатии кнопки реагировать на ввод в поле поиска сброса таблицы

Question

Я хочу сбросить ввод текста в раскрывающемся списке пользовательского поиска при нажатии кнопки при использовании таблицы antd.

Не могу подтвердить filterDropdown, я попытался изменить таблицу, но не повезло,он не вернет мне handleClearFilters, чтобы очистить входные данные поиска, так как этот реквизит принадлежит filterDropdown.

Кому-нибудь удалось очистить входные данные поиска?

детская площадка: https://codesandbox.io/s/87o53mq29

Обновление:

Вот окончательный рабочий код в соответствии с ответом @shubham:

import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Input, Button, Icon } from "antd";
import Highlighter from "react-highlight-words";

class App extends React.Component {
  state = {
    searchText: "",
    key: 0,
    data: [
      {
        key: "1",
        name: "John Brown"
      },
      {
        key: "2",
        name: "Joe Black"
      }
    ]
  };

  getColumnSearchProps = dataIndex => ({
    filterDropdown: ({
      setSelectedKeys,
      selectedKeys,
      confirm,
      clearFilters
    }) => (
      <div style={{ padding: 8 }}>
        <Input
          ref={node => {
            this.searchInput = node;
          }}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e =>
            setSelectedKeys(e.target.value ? [e.target.value] : [])
          }
          onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
          style={{ width: 188, marginBottom: 8, display: "block" }}
        />
        <Button
          type="primary"
          onClick={() => this.handleSearch(selectedKeys, confirm)}
          icon="search"
          size="small"
          style={{ width: 90, marginRight: 8 }}
        >
          Search
        </Button>
        <Button
          onClick={() => this.handleReset(clearFilters)}
          size="small"
          style={{ width: 90 }}
        >
          Reset
        </Button>
      </div>
    ),
    filterIcon: filtered => (
      <Icon type="search" style={{ color: filtered ? "#1890ff" : undefined }} />
    ),
    onFilter: (value, record) =>
      record[dataIndex]
        .toString()
        .toLowerCase()
        .includes(value.toLowerCase()),
    onFilterDropdownVisibleChange: visible => {
      if (visible) {
        setTimeout(() => this.searchInput.select());
      }
    },
    render: text => (
      <Highlighter
        highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
        searchWords={[this.state.searchText]}
        autoEscape
        textToHighlight={text.toString()}
      />
    )
  });

  handleSearch = (selectedKeys, confirm) => {
    confirm();
    this.setState({ searchText: selectedKeys[0] });
  };

  handleReset = clearFilters => {
    clearFilters();
    this.setState({ searchText: "" });
  };

  reset = () => {
    this.setState({ key: this.state.key + 1, searchText: '' });
  };

  render() {
    const columns = [
      {
        title: "Name",
        dataIndex: "name",
        key: "name",
        width: "30%",
        ...this.getColumnSearchProps("name")
      }
    ];
    return (
      <div>
        <button onClick={this.reset}>Reload and Reset Search Filter</button>
        <Table key={this.state.key} columns={columns} dataSource={this.state.data} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"))

Answer 1

Одно из решений состоит в том, чтобы заставить сам компонент таблицы перерисовываться, выполнив следующее: * добавьте ключ к компоненту таблицы

  <Table key={this.state.index} columns={columns} dataSource={data} />

в состоянии добавьте новое значение следующим образом:

class App extends React.Component {
  state = {
    searchText: '',
    index: 0
  };
...

Модифицируйте функцию resetSearch следующим образом:

resetSearch = () => {
      this.setState({
        index: this.state.index + 1
      })
  }

Это также должно сбрасывать поле ввода после перезапуска таблицы после изменения key.