Javascript 在React钩子中使用带有“Set”状态的动态Var？

这是React组件中非常常见的模式：

handleTextFieldChange(event)
{
    const name = event.currentTarget.name;
    this.setState({[name]: event.currentTarget.value})
}

什么Javascript语法可以用于对React钩子执行相同的操作

i、 e.可能与以下内容类似的事情：

handleTextFieldChange(event)
{
    const name = event.currentTarget.name;
    this.set[name](event.currentTarget.value);
}

---

您可以将单个

useState

与包含所有输入值的对象的默认值一起使用，并像使用类组件一样进行更新

示例

import React, { useState } from "react";

const App = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const onChangeHandler = (setIdentifierState, event) => {
    setIdentifierState(event.target.value);
  };

  return (
    <div>
      <p>{"Email: " + email}</p>
      <p>{"Password: " + password}</p>
      <input
        type="text"
        placeholder="email"
        onChange={onChangeHandler.bind(this, setEmail)}
      />
      <input
        type="text"
        placeholder="password"
        onChange={onChangeHandler.bind(this, setPassword)}
      />
    </div>
  );
};

export default App;

const{useState}=React；
函数App（）{
const[state，setState]=useState（{email:，密码：}）；
函数onChange（事件）{
常量{name，value}=event.target；
setState（prevState=>（{…prevState，[名称]：值}））；
}
返回(
);
}
render（，document.getElementById（“根”））

类Yup扩展了React.Component{
状态={
首先：“，
第二个：“”
};
handleTextFieldChange=（{target:{name，value}}}）=>
this.setState（{[name]：value}）；
render（）{
const{first，second}=this.state；
返回(
{first}

{second}

);
}
}

和钩子一样

function Yup() {
  const [{ first, second }, setState] = useState({ first: "", second: "" });

  function handleTextFieldChange({ target: { name, value } }) {
    setState(prevState => ({ ...prevState, [name]: value }));
  }

  return (
    <div>
      <p>{first}</p>
      <p>{second}</p>
      <input type="text" name="first" onChange={handleTextFieldChange} />
      <input type="text" name="second" onChange={handleTextFieldChange} />
    </div>
  );
}

函数Yup（）{
常量[{first，second}，setState]=useState（{first:，second:：}）；
函数handleTextFieldChange（{target:{name，value}}）{
setState（prevState=>（{…prevState，[名称]：值}））；
}
返回(
{first}

{second}

);
}
像这样的东西怎么样

function handleTextFieldChange(mySetFunction, event) {
    const value = event.currentTarget.value;
    mySetFunction(value);
}

<TextField
    placeholder="Email"
    name="passwordResetEmailAddress"
    onChange={(e) => handleTextFieldChange(setPasswordResetEmailAddress, e)}
>
    {passwordResetEmailAddress}
</TextField>

函数handleTextFieldChange（mySetFunction，事件）{
常量值=event.currentTarget.value；
mySetFunction（值）；
}
handleTextFieldChange（setPasswordResetEmailAddress，e）}
>
{passwordResetEmailAddress}

我已经测试过了，效果很好
 我最近在将我的组件从类转换为函数时解决了同样的问题。我最终创建了一个对象，该对象可以指向单独的状态挂钩：

consttextstates={}；
const setTextStates={}；
for（名称的变量名称）{
让[textState，setTextState]=useState（“”）；
textStates[名称]=textState；
setTextStates[名称]=setTextState；
}
通过接收更新状态函数作为onChange函数中的参数，可以动态更新目标字段的状态

示例

import React, { useState } from "react";

const App = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const onChangeHandler = (setIdentifierState, event) => {
    setIdentifierState(event.target.value);
  };

  return (
    <div>
      <p>{"Email: " + email}</p>
      <p>{"Password: " + password}</p>
      <input
        type="text"
        placeholder="email"
        onChange={onChangeHandler.bind(this, setEmail)}
      />
      <input
        type="text"
        placeholder="password"
        onChange={onChangeHandler.bind(this, setPassword)}
      />
    </div>
  );
};

export default App;




import React，{useState}来自“React”；
常量应用=（）=>{
const[email，setEmail]=useState（“”）；
const[password，setPassword]=useState（“”）；
const onChangeHandler=（setIdentifierState，事件）=>{
setIdentifierState（事件、目标、值）；
};
返回(
{“电子邮件：+电子邮件}

{“密码：+密码}

);
};
导出默认应用程序；
我是这样解决的（比@VikR提供的解决方案更具动态性）

然后在我的代码中：

        <TextField fullWidth value={title} type="date"
                   label={t('service.ticket.add.title')}
                   placeholder={t('service.ticket.add.titlePh')}
                   onChange={handleChange(setTitle)} variant="outlined"/>


我对此犹豫不决，因为添加额外代码会带来额外的开销，但现在，这似乎是使用钩子实现此目的的唯一方法如果我们将每个状态键分组到一个对象中，我们是否会失去细粒度控制？当然，这是在Hooksaf之前做的。在几个小时试图让一个更“物理”的有条件状态起作用之后，这个“看不见的”案例对我起了作用。我的用例试图为复选框生成处理程序，这些复选框在任何时间、任何数量都可能存在或不存在，因此，如果有人这样做（或类似），这就把我带到了正确的位置。答案很好。从class->hook的转换非常有用。
        <TextField fullWidth value={title} type="date"
                   label={t('service.ticket.add.title')}
                   placeholder={t('service.ticket.add.titlePh')}
                   onChange={handleChange(setTitle)} variant="outlined"/>