TypeScript中React事件函数传参问题：父组件setState传递至子组件onChange

错误原因 #

你遇到的类型错误核心在于：原生HTML输入框的onChange事件回调仅接受ChangeEvent<HTMLInputElement>这一个参数，但你定义的子组件InputProps中onChange要求接收两个参数（事件对象+setState函数），当把这个函数传给InputStyle（styled-components包装的input）时，类型完全不兼容。

正确解决方案 #

原子组件（如这里的Input）应专注于UI封装，无需耦合状态管理逻辑。正确做法是在父组件中处理状态更新，子组件仅负责转发输入事件，具体修改如下：

1. 调整父组件InputItem #

简化onChange函数，直接在父组件内完成状态更新，无需额外传递setState参数：

// InputItem(父组件)
import { useState } from 'react';
import styled from 'styled-components';
import Input from '../../../components/atom/Input';

const InputStyle = styled.input`
  font-size: 15px;
`;

function InputItem() {
  const [email, setEmail] = useState('');
  
  // 直接在父组件中处理状态更新逻辑
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEmail(e.target.value);
  };
  
  return (
    <>
      <Input
        InputStyle={InputStyle}
        type="text"
        value={email}
        onChange={onChange} // 直接传递处理好的事件函数
        placeholder={'ID'}
      />
    </>
  );
}
export default InputItem;

2. 修正子组件Input #

将InputProps中的onChange类型改为原生输入框的事件处理类型，让子组件仅负责转发事件：

// Input(子组件)
import { StyledComponent } from 'styled-components';
import { ChangeEventHandler } from 'react';

interface InputProps {
  InputStyle: StyledComponent<'input', any, {}, never>;
  type: string;
  value: string;
  // 使用原生的ChangeEventHandler类型，匹配输入框的事件回调要求
  onChange: ChangeEventHandler<HTMLInputElement>;
  placeholder: string;
}

function Input({ InputStyle, type, value, onChange, placeholder }: InputProps) {
  return (
    <InputStyle
      type={type}
      value={value}
      onChange={onChange} // 现在类型完全匹配
      placeholder={placeholder}
    ></InputStyle>
  );
}

export default Input;

设计合理性说明 #

• 原子组件的核心职责是复用UI，剥离状态管理逻辑后，Input组件可以在任何需要输入框的场景中复用，无需关心外部状态的更新方式。
• 父组件负责自身状态管理，逻辑更清晰，完全符合React单向数据流的设计原则。

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