React设计4输入搜索显示表数据

Question

我尝试创建Ant design 4输入搜索来过滤数据、名称和年龄，当我搜索姓名或年龄想要显示表数据时，没有人知道如何正确地这样做。

https://stackblitz.com/edit/react-ghvwxl?file=index.js

代码在这里

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    render: text => <a>{text}</a>
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age"
  }
];

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32
  }
];
const onSearch = value => console.log(value);
ReactDOM.render(
<div><Search
      placeholder="input search text"
      allowClear
      enterButton="Search"
      size="large"
      onSearch={onSearch}
    />
    <br/>
       <br/>   <br/>
    <Table columns={columns} dataSource={data} /></div>,
    document.getElementById('container')
 
);

谢谢

Answer 1

• 您需要提取代码来创建组件；
• 使用filterInput创建一个包含inputSearch值的inputSearch状态。React.useState返回一个数组，其中第一个值是状态，第二个是更新该状态值的函数；
• 创建一个基于filterData的函数filterInput来过滤数据表；

对于filterData，如果数据为空，则返回所有数据。我检查是否是一个数字来决定如何过滤，按姓名或年龄。

function App() {
  const [filterInput, setFilterInput] = React.useState('')
  const filterData = () => {
    if(filterInput === '') return data

    if(isNaN(filterInput)) {
      return data.filter(({ name }) => name.includes(filterInput))
    }
    return data.filter(({ age }) => age === +filterInput)
  }

  return <div><Search
      placeholder="input search text"
      allowClear
      enterButton="Search"
      size="large"
      onSearch={setFilterInput}
    />
    <br/>
       <br/>   <br/>
    <Table columns={columns} dataSource={filterData()} /></div>
}

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

样本代码

Answer 2

这会解决你的问题

import React, { useState } from 'react';
import 'antd/dist/antd.css';
import { Table, Input } from 'antd';
import surveyList from './surveyList';

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    render: text => <a>{text}</a>
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age"
  }
];

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32
  }
]; 


function SearchTable() {
  const [filterTable, setFilterTable] = useState(null);

  const onSearch = (value) => {
    // const filterData = data.filter((item) => item.survey.includes(value));
    const filterData = data.filter((o) => Object.keys(o).some((k) => String(o[k])
      .toLowerCase()
      .includes(value.toLowerCase())));
    setFilterTable(filterData);
  };

  return (
    <div>
      <Input.Search
        style={{ border: '3px solid red', margin: '0 0 10px 0' }}
        placeholder="Search by..."
        enterButton
        onSearch={onSearch}
      />
      <Table
        columns={columns}
        dataSource={filterTable == null ? data : filterTable}
      />
    </div>
  );
}

export default SearchTable;