如何使用单个函数处理 React 应用程序中的多个 select 下拉列表？

Question

我有一个表单，其中包含 3 个 select 下拉列表，可根据 selected 值过滤数组。我想知道我是否可以使用一个函数来基于参数处理所有这些表单，而不是为这些表单中的每一个都设置一个 onChange 处理程序。

我尝试将字符串传递给函数，但它不起作用，因为它期望将事件作为参数传递。

这是反应形式的代码：

const UserSearchBox = ({ handleChange, handleLocationChange, handleTeamChange, handleClientChange }) => {
    return (
        <form className="user-search">
            <input className="user-input" placeholder="Search for Peeps" name="userSearch" onChange={handleChange} />

            <div>
                <select defaultValue="all" onChange={handleLocationChange}>
                    <option value="all">All</option>
                    <option value="boston">Boston</option>
                    <option value="chicago">Chicago</option>
                    <option value="tampa">Tampa</option>
                </select>

                <select defaultValue="all" onChange={handleTeamChange}>
                    <option value="all">All</option>
                    <option value="design">Design</option>
                    <option value="engineering">Engineering</option>
                    <option value="finance">Finance</option>
                </select>

                <select defaultValue="all" onChange={handleClientChange}>
                    <option value="all">All</option>
                    <option value="company">Company1</option>
                    <option value="company2">Company2</option>
                    <option value="company3">Company3</option>
                </select>
            </div>


        </form>
    )
}

这是应用程序的代码：

const handleInputChange = (e) => {
    e.preventDefault();
    let searchTerm = e.target.value;

    if(searchTerm){
      let filteredUsers = users.filter((x) => x.name.toLowerCase().includes(searchTerm.toLowerCase()))
      setUsers(filteredUsers)
    } else{
      setUsers(allUsers)
    }
  }

  const handleLocationChange = (e) => {
    e.preventDefault();
    let searchTerm = e.target.value;

    if(searchTerm !== "all"){
      let filteredUsers = allUsers.filter((x) => x.location.toLowerCase().includes(searchTerm.toLowerCase()))
      setUsers(filteredUsers)
    } else{
      setUsers(allUsers)
    }
  }

  return (
    <div className="container-fluid">
      <Header name={loggedInUser.name} profile_photo={loggedInUser.profile_photo} />
      <UserSearchBox handleLocationChange={handleLocationChange} handleChange={handleInputChange}/>
      <Users users={users} />
    </div>
  )

Answer 1

您可以通过将 onChange 更改为此来传递附加参数：

onChange={(e) => { handleLocationChange(e, param1, param2, param3...) }}

或者如果您不需要该活动，您可以跳过它：

onChange{() => { handleLocationChange(param1, param2, param3...) }}

这样你仍然可以在里面获取你的事件，然后你可以添加你想要的任何其他参数。

对你有帮助吗？

Answer 2

另一个可能的解决方案，但我相信@Darkbound 有更精确的方法。

为选项添加数据属性：

<select defaultValue="all" onChange={handleSelectChange}>
                    <option data-filter-type="location" value="all">All</option>
                    <option data-filter-type="location" value="boston">Boston</option>
                    <option data-filter-type="location" value="chicago">Chicago</option>
                    <option data-filter-type="location" value="tampa">Tampa</option>
                </select>

然后使用switch语句：

if (searchTerm !== "all") {
      switch (attr) {
        case 'location':
          setUsers(users.filter((x) => x.location.toLowerCase().includes(searchTerm.toLowerCase())));
          break;
        case 'team':
          console.log('term: ', searchTerm);
          
          setUsers(users.filter((x) => x.team.toLowerCase().includes(searchTerm.toLowerCase())));
          break;
        case 'client':
          setUsers(users.filter((x) => x.client.toLowerCase().includes(searchTerm.toLowerCase())));
          break;
        default:
          setUsers(allUsers)
      }
    } else {
      setUsers(allUsers)
    }

如何使用单个函数处理 React 应用程序中的多个 select 下拉列表？

How to handle multiple select dropdowns in a React application with a single function?

javascript

reactjs

react-forms