React 多输入框过滤数组：清空输入框时的处理方法

在 React 中，你可以使用useState来管理输入框的值，并使用useEffect监听输入框的变化。当清空一个输入框时，你可以将对应字段的值设置为一个特定的标识，例如null或者空字符串，并在过滤数组时，判断该字段是否为特定标识来决定是否过滤。\n\n下面是一个示例代码：\n\njsx\nimport React, { useState, useEffect } from 'react';\n\nconst App = () => {\n const [data, setData] = useState([\n { name: 'John', age: 25 },\n { name: 'Jane', age: 30 },\n { name: 'Bob', age: 35 },\n ]);\n\n const [nameFilter, setNameFilter] = useState('');\n const [ageFilter, setAgeFilter] = useState('');\n\n useEffect(() => {\n const filteredData = data.filter(item => {\n if (nameFilter !== '' && item.name.indexOf(nameFilter) === -1) {\n return false;\n }\n\n if (ageFilter !== '' && item.age !== parseInt(ageFilter)) {\n return false;\n }\n\n return true;\n });\n\n // 过滤后的数据\n console.log(filteredData);\n }, [data, nameFilter, ageFilter]);\n\n const handleNameChange = e => {\n setNameFilter(e.target.value);\n };\n\n const handleAgeChange = e => {\n setAgeFilter(e.target.value);\n };\n\n return (\n <div>\n <input type="text" value={nameFilter} onChange={handleNameChange} placeholder="Name" />\n <input type="text" value={ageFilter} onChange={handleAgeChange} placeholder="Age" />\n </div>\n );\n};\n\nexport default App;\n\n\n在上述示例中，我们使用了两个输入框来过滤名字和年龄。当输入框中的值发生变化时，对应的过滤条件会更新，并通过useEffect监听这些条件的变化。当任意一个输入框被清空时，对应的过滤条件会被设置为空字符串，即''。在过滤数组时，通过判断过滤条件是否为空字符串来决定是否进行过滤。\n\n请注意，这只是一个简单的示例，实际应用中可能需要更复杂的过滤逻辑和数据结构。