React Hooks多输入变更处理函数如何简化？求优化方案

当然有办法简化啦！你现在的写法虽然能实现功能，但重复的if判断确实不够优雅，下面给你几个实用的优化方向，选适合你的就行：

1. 合并状态为单个对象（最接近类组件的写法） #

如果你的这些输入字段本来就属于同一个表单，最直接的方式是把分散的name、genre、description状态合并成一个对象，这样就能复用类组件里那种简洁的处理逻辑了：

import { useState } from 'react';

function YourComponent() {
  const [formData, setFormData] = useState({
    name: '',
    genre: '',
    description: ''
  });

  const handleChange = (e) => {
    const { id, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [id]: value
    }));
  };

  return (
    <div>
      <input id="name" value={formData.name} onChange={handleChange} />
      <input id="genre" value={formData.genre} onChange={handleChange} />
      <textarea id="description" value={formData.description} onChange={handleChange} />
    </div>
  );
}

这个方法的好处是逻辑统一，新增字段的时候只需要在初始状态里加对应属性，不用修改handleChange函数，扩展性很强。

2. 用映射表关联ID与状态设置器 #

如果你不想合并状态，希望保留单独的setName、setGenre这些函数，可以创建一个映射对象，把输入框的id和对应的状态设置器关联起来：

import { useState } from 'react';

function YourComponent() {
  const [name, setName] = useState('');
  const [genre, setGenre] = useState('');
  const [description, setDescription] = useState('');

  // 创建id到setter的映射
  const setterMap = {
    name: setName,
    genre: setGenre,
    description: setDescription
  };

  const handleChange = (e) => {
    const { id, value } = e.target;
    // 先判断id是否在映射里，避免报错
    if (setterMap[id]) {
      setterMap[id](value);
    }
  };

  return (
    <div>
      <input id="name" value={name} onChange={handleChange} />
      <input id="genre" value={genre} onChange={handleChange} />
      <textarea id="description" value={description} onChange={handleChange} />
    </div>
  );
}

这种方式既保留了单独的状态变量，又消除了重复的if判断，新增字段时只需要在setterMap里加一行映射就行。

3. 使用useReducer处理复杂表单 #

如果你的表单后续可能变得更复杂（比如有联动逻辑、字段校验等），可以用useReducer来集中管理状态更新逻辑：

import { useReducer } from 'react';

// 定义reducer函数
const formReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return {
        ...state,
        [action.payload.id]: action.payload.value
      };
    default:
      return state;
  }
};

function YourComponent() {
  const [formData, dispatch] = useReducer(formReducer, {
    name: '',
    genre: '',
    description: ''
  });

  const handleChange = (e) => {
    const { id, value } = e.target;
    dispatch({
      type: 'UPDATE_FIELD',
      payload: { id, value }
    });
  };

  return (
    <div>
      <input id="name" value={formData.name} onChange={handleChange} />
      <input id="genre" value={formData.genre} onChange={handleChange} />
      <textarea id="description" value={formData.description} onChange={handleChange} />
    </div>
  );
}

useReducer把状态更新的逻辑抽离到了单独的函数里，后续扩展复杂逻辑时会更清晰，也更容易维护。

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