如何在 React 中处理多个输入

最近，在处理多个输入时，我不得不重构 React Form，我想分享一下我是如何做到的。

我的表单如下所示：

问题

看看下面的启动代码
该Form组件共有 5 个输入字段；5 种不同的状态和 5 种不同的onChange内联函数
这不完全是 DRY 代码🙀



import React, { useState } from "react";

export default function Form() {
  const [newCompany, setCompany] = useState("");
  const [newPosition, setPosition] = useState("");
  const [newLink, setNewLink] = useState("");
  const [newDate, setNewDate] = useState("");
  const [newNote, setNewNote] = useState("");

  return (
        <form>
          <input
            value={newCompany}
            onChange={(e) => setCompany(e.target.value)}
            label="Company"
          />
          <input
            value={newPosition}
            onChange={(e) => setPosition(e.target.value)}
            label="Job Title"
          />
          <input
            value={newLink}
            onChange={(e) => setNewLink(e.target.value)}
            label="Job Link"
          />
          <input
            type="date"
            value={newDate}
            onChange={(e) => setNewDate(e.target.value)}
          />
          <input
            value={newNote}
            onChange={(e) => setNewNote(e.target.value)}
            label="Note"
          />
          <button type="submit"> Submit </button>
        </form>
  );
}

另外，如果我稍后想添加一个reset函数，我的代码将如下所示：🙅🏽‍♀️



  const reset = () => {
    setCompany("");
    setPosition("");
    setNewLink("");
    setNewDate("");
    setNewNote("");
  };

解决方案：重构✨

步骤 1：添加输入默认值并初始化状态

首先，让我们为所有输入字段添加默认值
我们怎么做呢？我们用这些值创建一个对象字面量，并将其设置为空字符串。
然后，使用useState()React Hook，我们values用initialValues对象初始化状态
重要提示：请记住将value属性及其对应的值添加到每个输入字段（例如 values={values.company}）



const initialValues = {
  company: "",
  position: "",
  link: "",
  date: "",
  note: "",
};

export default function Form() {
  const [values, setValues] = useState(initialValues);

  return (
        <form>
          <input
            value={values.company}
            onChange={(e) => setCompany(e.target.value)}
            label="Company"
          />
 //...

步骤 2：处理多个输入变化

这里的目标是用一个处理程序来处理所有输入onChange
为了在输入字段每次发生变化时更新并跟踪它们，我们需要创建一个handleInputChange函数（见下文）
这里发生了什么？（快速回顾）
- 首先，我们使用对象解构来从我们的输入中获取或提取name和value属性（查看下面的评论 - 它们是等效的）
- 然后，我们使用函数和扩展运算符，values用现有值更新状态对象setValues()
- 最后，我们使用以下 ES6 语法来更新value由此触发的事件：onChange[name]: value
- 这一步非常重要name！我们需要为输入添加一个属性，[name]: value这意味着我们要设置一个动态name属性键（取自我们的输入 -例如 company: e.target.value），该键的值将等于value我们当前输入状态的。

参考：React 文档



 //... 

  const handleInputChange = (e) => {
    //const name = e.target.name 
    //const value = e.target.value 
    const { name, value } = e.target;

    setValues({
      ...values,
      [name]: value,
    });
  };

  return (
        <form>
          <input
            value={values.company}
            onChange={handleInputChange}
            name="company" //IMPORTANT 
            label="Company"
          />
   // ...

步骤 3：添加`handleInputChange`到输入字段

将函数添加handleInputChange到onChange每个输入字段的 prop中
查看最终代码；这是一个更清晰、更易于管理的形式👌🏽



import React, { useState } from "react";

const initialValues = {
  company: "",
  position: "",
  link: "",
  date: "",
  note: "",
};

export default function Form() {
  const [values, setValues] = useState(initialValues);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

  return (
        <form>
          <input
            value={values.company}
            onChange={handleInputChange}
            name="company"
            label="Company"
          />
          <input
            value={values.position}
            onChange={handleInputChange}
            name="position"
            label="Job Title"
          />
           // ... Rest of the input fields
          <button type="submit"> Submit </button>
        </form>
  );
}

希望对你有帮助。欢迎大家评论和反馈！🎊

文章来源：https://dev.to/deboragaleano/how-to-handle-multiple-inputs-in-react-55el

如何在 React 中处理多个输入

如何在 React 中处理多个输入

问题

解决方案：重构✨

步骤 1：添加输入默认值并初始化状态

步骤 2：处理多个输入变化

步骤 3：添加handleInputChange到输入字段

步骤 3：添加`handleInputChange`到输入字段