如何使用单个功能处理React应用程序中的多个选择下拉列表？

问题描述

我有一个带有3个select下拉列表的表单，这些下拉列表根据选定的值过滤数组。我想知道是否可以使用单个函数也基于参数处理所有这些函数，而不是为每种表单都提供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>
  )

解决方法

您可以通过将onChange更改为此事件来传递其他参数：

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

或者，如果您不需要该事件，可以跳过该事件：

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

这样，您仍然可以在其中获取事件，然后添加所需的其他任何参数。

对您有帮助吗？

,

另一个可能的解决方案，但是我相信@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)
    }