REACT-antd的table的筛选问题

最新推荐文章于 2024-04-12 18:01:23 发布

贪玩的木木

最新推荐文章于 2024-04-12 18:01:23 发布

阅读量9.7k

点赞数 2

文章标签： react antd table

本文链接：https://blog.csdn.net/weixin_43844995/article/details/96011501

版权

REACT-antd的table的筛选问题

作为一个刚刚接触react的小白，最近在学习的过程中碰到了不少问题，其中有些不可避免且努力了好久都没什么效果的问题，姑且先埋个坑吧，说不定以后就会了呢，要是有大牛看见愿意扶我一把那就更好了。
好，接下来进入正题。问题1是这样的：在我使用antd的table的时候，发现其中的筛选功能好像是写死了的，比如antd中原来的筛选功能是写在name上的，然后我把它改成age之后，就报错了：TypeError: record.age.includes is not a function.感觉应该是record里面的数据的问题，但是我又看不到也没啥办法。
然后是问题2：在实现搜索功能的时候，还原搜索使用antd给的办法没问题，在67、68行那里，
<Button onClick={() => this.handleReset(clearFilters)} size=“small” style={ { width: 90 }}>
Reset

但是我在外面又用了一个按钮来实现这个功能，就只能实现一半，高亮倒是没了，不过icon样式没变回去，然后数据也没有显示成搜索之前的样子。在164行<Button onClick={() => this.handleReset(this.clearFilters)}>Clear Search
这里我是真的不会，求帮助！
下面献上我拙劣的代码，希望有大佬可以帮我看看。

import React from 'react';
import {
    Table, Button , Input , Icon  } from 'antd';
import Highlighter from 'react-highlight-words';
import axios from 'axios';
import './style.css';

class MyTable extends React.Component {
   
  state = {
   
        filteredInfo: null,
        sortedInfo: null,
        searchText: '',
        data: []
  };

  handleChange = (pagination, filters, sorter) => {
   
    this.setState({
   
      filteredInfo: filters,
      sortedInfo: sorter,
    });
  };
//还原筛选
  clearFilters = () => {
   
    this.setState({
    filteredInfo: null });
  };
//还原排序
  clearSorted = () => {
   
    this.setState({
    sortedInfo: null });
  };
//还原搜索
  clearSearch = clearFilters => {
   
    clearFilters();
    this.setState({
    searchText: null });
  }; 
//一键还原
  clearAll = () => {
   
    this.setState({
   
      filteredInfo: null,
      sortedInfo: null,
      searchText: null
    });
  };

  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 }

最低0.47元/天解锁文章

贪玩的木木

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
REACT-antd的table的筛选问题

REACT-antd的table的筛选问题作为一个刚刚接触react的小白，最近在学习的过程中碰到了不少问题，其中有些不可避免且努力了好久都没什么效果的问题，姑且先埋个坑吧，说不定以后就会了呢，要是有大牛看见愿意扶我一把那就更好了。好，接下来进入正题。问题是这样的：在我使用antd的table的时候，发现其中的筛选功能好像是写死了的，比如antd中原来的筛选功能是写在name上的，然后我把它改...
复制链接

扫一扫