React TS中传递onChange事件给子输入组件后输入无响应求助

• 输入组件：
• 表单组件：

已添加上述两个组件的图片，目前在表单组件中使用输入组件时，onChange事件无法正确跟踪输入内容，输入框输入后无任何值显示，寻求解决办法。

1. 确认输入组件为受控组件
   受控组件需要将value与表单组件的state绑定，同时通过onChange更新state。确保输入组件的value属性接收来自父组件的props，而非未赋值或硬编码。
   基础示例：

   // 输入组件
   const InputComponent = ({ value, onChange }) => {
     return <input type="text" value={value} onChange={onChange} />;
   };
   
   // 表单组件
   const FormComponent = () => {
     const [inputValue, setInputValue] = useState('');
     const handleChange = (e) => {
       setInputValue(e.target.value);
     };
     return <InputComponent value={inputValue} onChange={handleChange} />;
   };
   

2. 检查onChange事件的参数传递
   若输入组件内部封装了onChange逻辑，需确保正确传递事件对象或输入值到父组件。比如内部处理后，调用父组件传入的onChange并传递对应值：

   const InputComponent = ({ value, onChange }) => {
     const handleInnerChange = (e) => {
       // 如有格式化等额外处理
       const formattedValue = e.target.value.trim();
       onChange(formattedValue); // 若父组件期望事件对象则传递e
     };
     return <input type="text" value={value} onChange={handleInnerChange} />;
   };
   

3. 确保state更新逻辑正确
   若state更新依赖之前的状态，使用函数式更新避免快照问题：

   const handleChange = (e) => {
     setInputValue(prev => e.target.value);
   };
   

4. 避免受控/非受控组件混用
   不要同时使用defaultValue（非受控）和value+onChange（受控），受控组件必须用value配合onChange来控制输入值。

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