React TypeScript自定义Input组件失效问题求助

核心问题 #

你的自定义Input组件存在两个关键问题，导致无法正常捕获输入内容：

1. onChange回调参数不匹配：你在组件内将onChange的参数改为了event.target.value，但父组件绑定的回调函数是基于原生input的事件对象设计的，接收的是事件而非直接的字符串值，最终导致state无法正确更新。
2. ref未正确转发：函数组件不能直接接收ref作为props，必须通过React.forwardRef将ref转发给内部的原生input元素，否则ref无法绑定到实际的DOM节点上。

修正后的Input组件代码 #

import React, { forwardRef } from 'react';

interface InputProps {
  type: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  value?: string;
}

// 使用forwardRef转发ref，将ref作为第二个参数传入组件
const Input = forwardRef<HTMLInputElement, InputProps>(({ onChange, value, type }, ref) => {
  return (
    <input
      type={type}
      onChange={onChange} // 直接传递原生事件，与原生input行为保持一致
      value={value}
      ref={ref}
    />
  );
});

export default Input;

关键说明 #

1. 回调参数对齐：直接传递原生input的onChange事件给父组件，这样父组件的处理逻辑（比如setInputValue(e.target.value)）无需修改，就能和使用原生input时完全兼容。
2. 类型规范：将onChange的参数类型明确为React.ChangeEvent<HTMLInputElement>，替换原来的any，提升代码的类型安全性。
3. forwardRef使用：通过forwardRef实现ref的转发，确保父组件传递的ref能正确指向内部的原生input DOM元素，满足可能的DOM操作需求。

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