如何在同一个组件中使用两个 onChange 函数？答案

【问题标题】：how can i use two onChange function in the same component?如何在同一个组件中使用两个 onChange 函数？
【发布时间】：2022-10-13 16:57:34
【问题描述】：

我正在尝试在同一组件中使用 onChange 函数

但这是不允许的

我试图混合它们，但我不能，因为其中一个是 useState 而另一个是 const 函数

这是我的代码

const signup=()=>{

const [password, setPassword] = useState("");

const handlePasswordChange = (prop) => (event) => {
    setValues({ ...values, [prop]: event.target.value });
  };

return(

  <Input
                //    type="password"
                id="passwordInput"
                onChange={(e) => setPassword(e.target.value)}
                placeholder="Yaziniz"
                type={values.showPassword ? "text" : "password"}
                 onChange={handlePasswordChange("password")}
                value={values.password}

/>

那么如何在同一个组件中同时使用这两个 onChange 呢？

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

然后在 onChange 处理程序中调用两者

     onChange={(e) => {
       etPassword(e.target.value);
       handlePasswordChange("password")(e);
    }}

【讨论】：

【解决方案2】：

只需将 && 运算符添加到下一个函数

onChange={(e) => setPassword(e.target.value) && yourFunction}

【讨论】：

它仍然拒绝输入密码输入:(

【解决方案3】：

您所需要的只是将这些功能用于一个 onChange。

<Input 
  onChange={(e) => { 
    setPassword(e.target.value)
    handleChangePassword("password")
    ...otherFunctions
  }
/>

【讨论】：

它不起作用，因为 handleChangePassword() 是一个高阶函数