React中如何实现适配任意状态的通用输入变更onChange函数？

当然可以创建适配任意状态的通用onChange函数，下面提供两种实用的实现方式，兼顾复用性和TypeScript类型安全：

方法1：工厂函数生成onChange #

先写一个通用的工厂函数，接收组件的setState和当前状态，返回对应的onChange处理函数，同时兼容文本输入、复选框等不同输入类型：

// 定义表单状态的基础类型，支持字符串、数字、布尔值
type FormState = Record<string, string | number | boolean>;

const createOnChange = <T extends FormState>(
  setState: React.Dispatch<React.SetStateAction<T>>,
  state: T
) => {
  return (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value, type, checked } = event.target;
    // 针对复选框单独处理值（取checked而非value）
    const inputValue = type === 'checkbox' ? checked : value;
    setState({
      ...state,
      [name]: inputValue
    });
  };
};

使用示例（登录页） #

interface ILoginState {
  email: string;
  password: string;
  rememberMe: boolean;
}

const [loginState, setLoginState] = useState<ILoginState>({ 
  email: "", 
  password: "",
  rememberMe: false
});
// 生成当前页面的onChange函数
const loginOnChange = createOnChange(setLoginState, loginState);

// 输入组件中使用
<input 
  type="email" 
  name="email" 
  value={loginState.email} 
  onChange={loginOnChange} 
/>
<input 
  type="password" 
  name="password" 
  value={loginState.password} 
  onChange={loginOnChange} 
/>
<input 
  type="checkbox" 
  name="rememberMe" 
  checked={loginState.rememberMe} 
  onChange={loginOnChange} 
/>

方法2：自定义Hook（更推荐） #

把状态管理和onChange逻辑封装成自定义Hook，使用起来更简洁，还能通过useCallback缓存函数，避免不必要的组件重渲染：

type FormState = Record<string, string | number | boolean>;

function useFormState<T extends FormState>(initialState: T) {
  const [state, setState] = useState<T>(initialState);

  // 用useCallback缓存函数，依赖为空数组，性能更优
  const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value, type, checked } = event.target;
    const inputValue = type === 'checkbox' ? checked : value;
    // 使用函数式更新，避免依赖当前state导致的闭包问题
    setState(prevState => ({ ...prevState, [name]: inputValue }));
  }, []);

  return { state, onChange, setState };
}

使用示例（注册页） #

interface IRegisterState {
  username: string;
  email: string;
  password: string;
  agreeTerms: boolean;
}

const { state: registerState, onChange: registerOnChange } = useFormState<IRegisterState>({
  username: "",
  email: "",
  password: "",
  agreeTerms: false
});

// 输入组件使用
<input 
  name="username" 
  value={registerState.username} 
  onChange={registerOnChange} 
/>
<input 
  type="checkbox" 
  name="agreeTerms" 
  checked={registerState.agreeTerms} 
  onChange={registerOnChange} 
/>

关键说明 #

• 泛型<T extends FormState>保证了类型安全：TypeScript会自动校验输入框的name属性是否属于当前状态的键，避免拼写错误
• 兼容多种输入类型：处理了复选框的checked属性，比原代码的通用性更强
• 自定义Hook中使用函数式更新setState(prev => ...)，避免了闭包导致的状态更新不及时问题

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