在 React Hooks 中使用通用 function 设置多个 state

Question

我在最近的项目中遇到了一个问题，我有一个包含基本用户详细信息的表单，例如First Name 、 Last Name 、 Email 、 Mobile No 、 OTP 。 我在我的react-hook中创建了这些字段作为 state 。 现在我必须编写一个handleInputChange Function ，它将两个参数作为输入，即(label, value) ，并更新该字段的相应state值。

此外，如果我还必须在我的 handleInputChange 中设置 state 之前触发我的validation handleInputChange ，那么如何实现它。

请向我建议optimal解决方案，以便如果将来我的 UI 中有10 多个字段，如何动态更新它们的状态。

下面的代码片段是我Class-based组件，我想通过我的functional组件中的React-Hooks实现类似的行为。

初始 state 声明：

this.state = {
      name: { value: "", error: "" },
      city: { value: "", error: "" },
      email: { value: "", error: "" },
      contact_number: { value: "", error: "" },
      otp_data: {}
    };

我的句柄InputChange function：

handleInputChange = (name, value) => {
    let label = "";
    this.setState({
      [label]: {
        ...this.state[label],
        value: value,
        error: validateFields(label, value)
      }
    });
  };

Answer 1

当使用 react hooks 管理组件的 state 时，如果它们不会像这样相互影响，则更常见的是分离属性：

const [name, setName] = React.useState(`default name, can be left empty`)
const [city, setCity] = React.useState(`default city, can be left empty`)

现在您可以通过访问name和city来访问 state 并使用setCity('New York )` 更改它们。

如果您出于任何原因需要像在基于 Class 的组件中那样进行分组，您可以这样做：

const [obj, setObj] = React.useState({name: 'Milorad', city: 'Svrljig'})

现在要仅更改名称，您必须setObj(prev => ({...prev, name: 'Ilija'}))或在您有键值对的情况下：

const handleInputChange = (key, value) => {
    setObj(prev => ({...prev,
      [key]: {
        ...prev[key],
        value: value,
        error: validateFields(key, value)
      })
    });
  };

Answer 2

始终建议为每个变量创建单独的 state。 在功能组件中，您可以使用 useState 如下

const [name, setName] = useState({ value: "", error: "" });
const [city, setCity] = useState({ value: "", error: "" });
const [email, setEmail] = useState({ value: "", error: "" });
const [contact_number, setContactNumber] = useState({ value: "", error: "" });
const [otp_data, setOtpData] = useState({ value: "", error: "" });

// Mapping of label with state changer
const labelStateMap = {
        name: setName,
        city: setCity,
        email: setEmail,
        contact_number: setContactNumber,
        otp_data: setOtpData
}

handleInputChange = (label, value) => {
    const stateChanger = labelStateMap[label];
    if(stateChanger){
        stateChanger({
            value,
            error: validateFields(label, value)
        })
    }
  };

Answer 3

您可以考虑使用Formik ，而不是编写自己的逻辑，这对您来说更容易。

Answer 4

使用useState钩子你可以做这样的事情

制作一个 state 变量并将其初始化为初始表单数据

const [formData, setFormData] = useState({
  name: { value: "", error: "" },
  city: { value: "", error: "" },
  email: { value: "", error: "" },
  contact_number: { value: "", error: "" },
  otp_data: {},
});

为了应对变化，

handleInputChange = (event) => {
  const { name, value } = event.target;
  setFormData({
    ...formData,
    [label]: {
      value,
      error: validateFields(label, value),
    },
  });
};

handleChange function 的输入调用钩子返回的setFormData function 并覆盖更改输入的表单数据。