0

我有一个带有 3 个选择下拉列表的表单，它们根据所选值过滤数组。我想知道是否可以使用单个函数也可以根据参数处理所有这些表单，而不是为每个表单设置一个 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>
  )
4

2 回答 2

1

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

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

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

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

这样你仍然可以得到你的事件，然后你添加你想要的任何其他参数。

这对你有帮助吗？

于 2020-08-11T19:20:27.420 回答
0

另一个潜在的解决方案，但是我相信@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)
    }
于 2020-08-12T16:16:51.147 回答