使用重置按钮重置表格

Posted 2023-03-06

【中文标题】使用重置按钮重置表格

【英文标题】：Reset table using reset button

【发布时间】：2021-09-01 03:34:44

【问题描述】：

我是新的 React 开发人员（主要使用钩子，但没有找到带钩子的好例子），这里我有带有搜索功能的 antd 表，我的问题是当用户在搜索中写一些东西时，用户会得到不同的结果，如何取消通过单击“重置”按钮进行搜索？ 我的代码： https://codesandbox.io/s/antd-table-filter-search-forked-mqhcn?file=/src/EventsSection/EventsSection.js

【问题讨论】：

onClick 重置搜索值？？

当用户点击“重置”按钮时，它应该显示表格中的所有内容（取消用户完成的搜索？）

【参考方案1】：

您可以在TitleSearch.js 的输入中添加id：

<Search
      id='IDYOUWANT'
      placeholder="Enter Title"
      onSearch=onSearch
      onChange=onChange
      style= width: 200 
    />

并将事件添加到EventsSection.js

ResetInput = () => 
    const input = document.getElementById('IDYOUWANT');
    input.value = '';
    this.handleSearch('');
  
  ....
 <button
  onClick=this.ResetInput
 >Reset</button>

用你的 id 更改 IDYOUWANT

【参考方案2】：

运行这段代码

为重置值创建了一个新函数并从重置按钮触发它。

功能：

resetValue = () =>
        this.setState(
          eventsData: eventsData
        );
      

并从按钮触发

<button onClick=this.resetValue>Reset</button>

所有代码::

import React,  Component  from "react";

import styles from "./style.module.css";
import  EventsTable  from "../EventsTable";
import  StatusFilter  from "../StatusFilter";
import  TitleSearch  from "../TitleSearch";

const eventsData = [
  
    key: 1,
    title: "Bulletproof EP1",
    fileType: "Atmos",
    process: "match media",
    performedBy: "Denise Etridge",
    operationNote: "-",
    updatedAt: "26/09/2018 17:21",
    status: "complete"
  ,
  
    key: 2,
    title: "Dexter EP2",
    fileType: "Video",
    process: "Compliance",
    performedBy: "Dane Gill",
    operationNote: "passed",
    updatedAt: "21/09/2018 12:21",
    status: "inProgress"
  
];

class EventsSection extends Component 
  constructor(props) 
    super(props);
    this.state = 
      eventsData
    ;
  

  handleFilter = (key) => 
    const selected = parseInt(key);
    if (selected === 3) 
      return this.setState(
        eventsData
      );
    

    const statusMap = 
      1: "complete",
      2: "inProgress"
    ;

    const selectedStatus = statusMap[selected];

    const filteredEvents = eventsData.filter(
      ( status ) => status === selectedStatus
    );
    this.setState(
      eventsData: filteredEvents
    );
  ;

  handleSearch = (searchText) => 
    const filteredEvents = eventsData.filter(( title ) => 
      title = title.toLowerCase();
      return title.includes(searchText);
    );

    this.setState(
      eventsData: filteredEvents
    );
  ;

  handleChange = (e) => 
    const searchText = e.target.value;
    const filteredEvents = eventsData.filter(( title ) => 
      title = title.toLowerCase();
      return title.includes(searchText);
    );

    this.setState(
      eventsData: filteredEvents
    );
  ;

  resetValue = () =>
    this.setState(
      eventsData: eventsData
    );
  

  render() 
    return (
      <section className=styles.container>
        <header className=styles.header>
          <h1 className=styles.title>Events</h1>
          <button onClick=this.resetValue>Reset</button>
          <TitleSearch
            onSearch=this.handleSearch
            onChange=this.handleChange
            className=styles.action
          />
        </header>
        <EventsTable eventsData=this.state.eventsData />
      </section>
    );
  


export  EventsSection ;

【参考方案3】：

这是我为解决它所做的：

我添加了onClick按钮

<button onClick=this.resetSearch>Reset</button>

然后在函数中，我将 handleSearch 设置为 ''，这样做会重置表：

  resetSearch = () =>
  this.handleSearch('')

【讨论】：

使用此解决方案您不会清除输入吗？