如何通过选择下拉菜单在搜索选项卡中筛选表格

Question

I've created an table dynamically where we can create an user list. and I stored the users's list in the array of objects called

"数据"。现在我想通过在搜索栏中键入来过滤用户通过选择下拉值来输入和呈现用户表列标题为"用户名、角色、状态"。

const [search, setSearch] = useState("");
const [value, setValue] = useState('');
const dropDownChange = (e) => {
setValue(e.target.value);
};
const searchRows = (rows) => {
if(value === 'username' ){               //I want to select the dropdown for particular 
filter results
return rows.filter((row) => row.username.toLowerCase().indexOf(search) > -1)
else if(value == value.includes('Role')){          // want to select the column name.   
return rows.filter((row) => row.role.toLowerCase().indexOf(search) > -1)
}   else if(value == value.includes('status')){          // want to select the column name.   
return rows.filter((row) => row.role.toLowerCase().indexOf(search) > -1)
}
}
}/// Above code is not working
{ searchRows(data)
// .filter((item) => item.username.toLowerCase().includes(search))
.map((user) => {
return (
......mapping the users data......

/
/Drop down code...
<select value={value} onChange={dropDownChange} name="filter" id="filter">
<option value="username">Username</option>
<option value="role">Role</option>
<option value="status">Status</option>
</select>
// Search Bar Code....
<input
type="text"
id="search"
placeholder="Search users... "
onChange={(e) => setSearch(e.target.value)}
/>

我想根据下拉列表更改筛选结果。

Answer 1

我认为这就是您正在努力实现的目标。如果我理解正确的话，你想用<select>按角色过滤，用<input type="text">按名称过滤。

const {useEffect, useState} = React;
const arrayOfObjs = [
{id: 1, name: 'Tiffany', role: 'JS'},
{id: 2, name: 'George', role: 'JS'},
{id: 3, name: 'Tom', role: 'PHP'},
]
const Example = ({title}) => {
const [data, setData] = useState(arrayOfObjs);
const [dropDownFilter, setDropDownFilter] = useState('initial');
const [searchfilter, setSearchFilter] = useState('initial');

useEffect(() => {
if(dropDownFilter === 'initial') return;
if(dropDownFilter === ''){
setData(arrayOfObjs);
return;
}
setData(arrayOfObjs.filter(item => item.role === dropDownFilter))
}, [dropDownFilter]);

useEffect(() => {
if(searchfilter === 'initial') return;
if(searchfilter === ''){
setData(arrayOfObjs.filter(item => item.role === dropDownFilter));
return;
}
setData(arrayOfObjs.filter(item => item.role === dropDownFilter &&  item.name.toLowerCase().includes(searchfilter.toLowerCase())))
}, [searchfilter]);

return (
<div>
<select onChange={e => setDropDownFilter(e.target.value)}>
<option value="">Select Filter</option>
<option value="JS">Role JS</option>
<option value="PHP">Role PHP</option>
</select>

<input onKeyUp={e => setSearchFilter(e.target.value)} type="text" />

<div>
{data.map(item => 
<div key={item.id}>
{item.name} | Role: {item.role}
</div>
)}
</div>
</div>
);
};
ReactDOM.createRoot(
document.getElementById("root")
).render(
<Example title="Test Snippet" />
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>