React Native自定义TextInput组件onChange事件类型不匹配TypeScript报错

错误原因分析 #

你的代码存在几个关键的类型混用和语法错误：

• 错误继承了React DOM的InputHTMLAttributes（这是Web端input元素的属性类型），和React Native的TextInputProps完全不兼容
• 组件的props参数定义错误，写成了两个参数，正确应该是接收合并后的InputProps类型
• 自定义组件的onChange属性类型被错误关联到Web端的ChangeEvent，而React Native的TextInput事件是NativeSyntheticEvent<TextInputChangeEventData>

修正后的完整代码 #

import { useState } from 'react';
import { TextInput, type TextInputProps, type NativeSyntheticEvent, type TextInputChangeEventData } from 'react-native';

// 扩展React Native原生TextInputProps，添加自定义属性
interface InputProps extends TextInputProps {
  errorMsg?: string;
  labelText?: string;
  appearance?: "primary" | "rounded";
}

export default function Input(props: InputProps) {
  const [text, setText] = useState('');

  const handleChange = (e: NativeSyntheticEvent<TextInputChangeEventData>) => {
    // 自定义逻辑：更新内部状态
    setText(e.nativeEvent.text);
    // 传递原生事件给父组件的onChange
    if (props.onChange) {
      props.onChange(e);
    }
  };

  return (
    <TextInput
      placeholder={props.placeholder}
      onChange={handleChange}
      // 透传其他原生属性
      {...props}
    />
  );
}

关键修正点说明 #

• 类型继承修正：InputProps直接扩展React Native的TextInputProps，确保所有原生属性类型正确，同时添加自定义属性
• props参数修正：组件接收单一的InputProps类型参数，符合React组件定义规范
• 事件类型统一：handleChange的事件参数使用React Native原生的NativeSyntheticEvent<TextInputChangeEventData>，和TextInput的onChange类型完全匹配，避免类型不兼容报错
• 属性透传：使用{...props}可以自动透传所有原生TextInput属性，无需逐个手动传递

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