React函数式组件如何复用表单处理函数统一更新状态？

你不需要非得把所有扁平状态塞进对象里，有两种实用方案可以实现复用同一个onChange处理函数：

方案一：合并状态为对象（贴近类组件写法） #

把相关表单字段的状态合并成一个对象，就能直接沿用类组件的思路，通过name属性匹配状态键来更新。如果是深层嵌套的状态，只需要在更新时做好浅拷贝即可。

基础扁平对象状态示例： #

import { useState } from 'react';

function MyForm() {
  const [formState, setFormState] = useState({
    username: '',
    email: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    // 展开之前的状态，只更新对应name的字段
    setFormState(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  return (
    <form>
      <input
        type="text"
        name="username"
        value={formState.username}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={formState.email}
        onChange={handleChange}
      />
    </form>
  );
}

深层嵌套状态处理： #

如果状态有嵌套结构（比如formState.user.name），更新时要逐层浅拷贝，避免覆盖原有嵌套数据：

const [formState, setFormState] = useState({
  user: {
    name: '',
    age: ''
  },
  address: ''
});

const handleChange = (e) => {
  const { name, value } = e.target;
  setFormState(prevState => ({
    ...prevState,
    user: {
      ...prevState.user,
      [name]: value
    }
  }));
};

如果嵌套层级复杂，也可以用useReducer来简化深层状态更新逻辑，避免重复写拷贝代码。

方案二：保留扁平状态，用setter映射表 #

如果你想继续用多个独立的useState（保持状态扁平化），可以创建一个映射表，把输入框的name和对应的状态setter函数关联起来，这样同一个处理函数就能触发对应的更新：

import { useState } from 'react';

function MyForm() {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');

  // 建立name到setter的映射
  const setterMap = {
    username: setUsername,
    email: setEmail
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    // 通过name找到对应的setter并更新
    setterMap[name](value);
  };

  return (
    <form>
      <input
        type="text"
        name="username"
        value={username}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={email}
        onChange={handleChange}
      />
    </form>
  );
}

总结 #

两种方案各有适用场景：

• 如果表单字段较多、有嵌套结构，合并成对象状态（配合useState或useReducer）会更便于管理。
• 如果表单字段少、状态逻辑简单，用setter映射表可以保留状态扁平化的同时实现处理函数复用。

内容的提问来源于stack exchange，提问作者Michael Palmer