如何通过选择下拉列表来筛选搜索选项卡中的表

Question

我已经动态地创建了一个表，我们可以在其中创建一个用户列表。我将用户列表存储在名为

“数据”现在，我希望通过键入搜索栏输入来过滤用户，并通过选择下拉值(即“用户名、角色、状态”表列标题)来呈现用户。

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>

​