如何在React中通过useState Hook处理多表单值并简化重复代码？

完全可以通过单一状态对象来处理多输入框的变化，彻底消除重复的状态声明和事件处理器代码。下面是优化后的完整实现：

import React, { useState } from "react";

function ExpenseForm(props) {
  // 用一个对象状态管理所有表单字段
  const [expenseFormData, setExpenseFormData] = useState({
    title: "",
    price: "",
    date: ""
  });

  // 通用的输入变化处理器，利用input的name属性匹配状态键
  const inputChangeHandler = (e) => {
    const { name, value } = e.target;
    // 使用函数式更新确保基于最新状态修改
    setExpenseFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    // 直接从状态对象提取数据，处理日期格式
    const expenseData = {
      ...expenseFormData,
      date: new Date(expenseFormData.date)
    };
    props.newExpense(expenseData);

    // 重置表单状态
    setExpenseFormData({
      title: "",
      price: "",
      date: ""
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="new-expense__controls">
        <div className="new-expense__control">
          <label>Title</label>
          <input
            onChange={inputChangeHandler}
            type="text"
            name="title"
            value={expenseFormData.title}
          />
        </div>
        <div className="new-expense__control">
          <label>Amount</label>
          <input
            onChange={inputChangeHandler}
            type="number"
            name="price"
            value={expenseFormData.price}
            min="0.01"
            step="0.01"
          />
        </div>
        <div className="new-expense__control">
          <label>Date</label>
          <input
            onChange={inputChangeHandler}
            type="date"
            name="date"
            value={expenseFormData.date}
          />
        </div>
      </div>
      <div className="new-expense__actions">
        <button type="submit">Submit</button>
      </div>
    </form>
  );
}

export default ExpenseForm;

关键优化点： #

• 合并状态：将三个独立的useState合并为一个对象状态，统一管理所有表单字段
• 通用处理器：只写一个inputChangeHandler，通过输入框的name属性动态匹配状态对象的键，避免重复编写多个处理器
• 函数式状态更新：使用prevState确保状态更新基于最新值，避免并发更新导致的问题
• 简化提交与重置：提交时直接从状态对象提取数据，重置时只需设置空对象即可

内容的提问来源于stack exchange，提问作者Kia S