如何在 React.js 应用程序上使用多个用户输入过滤表格

如何解决如何在 React.js 应用程序上使用多个用户输入过滤表格

我在 React 应用程序上有 2 个主要组件：一个是包含一堆数据的表格（使用 Rsuite Table），另一个在表格上方，只是一个 div 和多个 {{ 1}} 文本字段。就这么简单：

例如，如果在“firstName”输入字段中，用户只输入一个 T 字母，表格网格应立即仅显示包含 T 的名称在名字里。这很好，我的实际问题是如何为您在上图中看到的 3 个输入实现这一点。也就是说，如果用户在多个输入文本框中输入内容？往下看：

以下是我的主要 input 的外观：

App.js

PS：状态正在从 function App() { const [dummyData,setDummyData] = useState([]); const [firstName,setFirstName] = useState(''); const [lastName,setLastName] = useState(''); const [city,setCity] = useState(''); const firstNameHandler = (input) => { setFirstName(input); } const lasttNameHandler = (input) => { setLastName(input); } const firstNameHandler = (input) => { setCity(input); } useEffect(() => { const generaterandomData = () => { setDummyData([...Array(100).keys().map(key => { return { firstName: faker.name.firstName(),lastName: faker.name.lastName(),city: faker.address.city() } }) )} generaterandomData(); },[]); return( <Filters changeFirstName={firstNameHandler} changeLastName={lastNameHandler} changeCity={cityHandler}/> <InfoTable items={dummyData}/> ); } export default App; 组件中提升。我使用 Filters 在组件第一次加载时生成随机数据。传入 useEffect 的 dummyData 只是一个数组，其中包含使用 faker.js 随机生成的对象，它们看起来像这样：

InfoTable

我的 { firstName: "John",lastName: "Smith",city: "San Francisco" } 组件如下所示：

Filters.js

因此，正如您所看到的，我正在提升状态，因此我在 function Filters = (props) => { const firstNameInputHandler = (event) => { props.changeFirstName(event.target.value); } const lastNameInputHandler = (event) => { props.changeLastName(event.target.value); } const cityInputHandler = (event) => { props.changeCity(event.target.value); } return( <div className="user_inputs"> <label htmlFor="firstName">First Name:</label> <input id="firstName" type="text" onChange={firstNameInputHandler}/> </div> <div className="user_inputs"> <label htmlFor="lastName">Last Name:</label> <input id="lastName" type="text" onChange={lastNameInputHandler}/> </div> <div className="user_inputs"> <label htmlFor="city">City:</label> <input id="city" type="text" onChange={cityInputHandler}/> </div> ); } export default Filters; 上提供了它们，这样我就可以过滤我在 table props 上传递的数组。

我的 App.js 组件非常简单，看起来像这样，再次使用 Rsuite Table：

InfoTable.js

表格显示确实很好，但我想要的是根据用户可能输入或可能不输入的各种文本字段过滤数据。例如：如果用户在名字输入字段中键入 Jo，在姓氏输入字段中键入 S，我希望表格仅显示符合此条件的对象。然后，如果用户输入 California，我希望表格重新调整为仅来自加利福尼亚的名字包含 Jo 和姓氏包含 S 的人。如果用户删除所有内容，表格应该是原始的 100 个值。

我认为问题的一小部分的一种方法是，在 function InfoTable = (props) => { return( <Table virtualized height={500} data={props.items} rowHeight={30}> <Column width={60}> <HeaderCell>First Name</HeaderCell> <Cell dataKey="firstName"/> </Column> <Column width={60}> <HeaderCell>Last Name</HeaderCell> <Cell dataKey="lastName"/> </Column> <Column width={60}> <HeaderCell>City</HeaderCell> <Cell dataKey="city"/> </Column> </Table> ); } export default InfoTable; 上，我检查 firstName 状态长度是否大于 0，如果是，则在作为 props 传递的数组上运行 App.js .所以在返回内部，关于网格组件，我有条件地将其渲染为糟糕：

.filter

我可以“有点”使用这种方法来检查字段中是否有输入，并呈现包含 100 行或按该条件过滤的表格。问题是，我如何使这适用于 3 个输入？ 例如：如果用户在 First Name 输入字段中输入 Jo，在 Last Name 输入字段中输入 S ，我希望表格仅显示符合此条件的行（名字包含 Jo 且姓氏包含 S 的对象）。然后，如果用户在 City 字段中键入 California，我希望该表重新调整为仅来自加利福尼亚且名字包含 Jo 且姓氏包含 Jo 的人S。如果用户从所有 3 个输入中删除文本，表格应重新调整以显示原始 100 个值。

请帮忙。

解决方法

对不起，我没有足够的声誉来发表评论，所以我回答了这个问题

如果这是一个演示，或者数据量很小，我认为 filter 完全可以，只需简单地链接过滤器：

const newData = originalData.filter(condition1).filter(condition2).filter(condition3)

如果这是一个高效的 Web 应用程序，也许我们应该让后端的 API 来做关于过滤器的事情，因为数据可能很大并且可能依赖于某种搜索引擎

如果你真的只想在客户端做，而且数据可能也很大，应该有一些技术，比如搜索引擎只在客户端，但我没有这方面的经验

,

考虑到给出的例子，解决方案非常简洁：

const filterCriteria = (obj) => {
  return obj.firstName.includes(firstName)
  && obj.lastName.includes(lastName)
  && obj.city.includes(city);
}

return(
  <InfoTable items={dummyData.filter(filterCriteria)} />
);

这提供了所需的结果。