可复用Select组件值传递异常：子组件正常父组件返回undefined

问题场景 #

开发了一个可复用Select组件，在Select.tsx中打印event.currentTarget.value能得到正确值，但父组件调用该组件时却获取到undefined。尝试切换target与currentTarget、父组件用箭头函数传递回调，都没解决问题。

相关代码 #

Select.tsx #

export const Select = (props: any) => {
    const [data] = useState(props.data);
    const [selectedData, updateSelectedData] = useState('');

    function handleChange(event: any) {
        updateSelectedData(event.currentTarget.value);
        console.log(event.currentTarget.value, 'in select.tsx line 10');
        if (props.onSelectChange) props.onSelectChange(selectedData);
    }

    let options = data.map((data: any) => (
        <option key={data.id} value={data.id}>
            {data.label}
        </option>
    ));

return (
    <>
     <select
       className={props.className ? props.className : 'float-right rounded-lg w-[50%] '}
       onChange={handleChange}>

      <option>Select Item</option>
     {options}
      </select>
    </>
  );
};

父组件代码 #

...
const actionSelectOptions = [
   { id: 1, label: 'Pricing Revised', value: 'Pricing Revised' },
   { id: 2, label: 'Cost Build-up Posted', value: 'Cost Build-up Posted' },
   { id: 3, label: 'Pricing Created', value: 'Pricing Created' },
 ];

function onSelectChange(event: any) {
   console.log(event.currentTarget.value);
 }

return (
...

<Select
className="flex justify-center items-center rounded-lg"
data={actionSelectOptions}
onSelectChange={onSelectChange}
/>
...                                         
)

也曾尝试在父组件这样传递回调：

<Select
...
onSelectChange={(e)=> console.log(event.currentTarget)} 

错误原因 #

1. 状态更新异步：updateSelectedData是异步操作，调用后立刻访问selectedData，拿到的还是更新前的旧值。
2. 参数类型不匹配：父组件回调期望接收event对象，但子组件传的是selectedData（状态值），导致父组件里event.currentTarget不存在，输出undefined。

修复方案 #

方案一：直接传递事件对象给父组件 #

子组件handleChange里直接把event传给父组件回调，不用依赖本地状态：

function handleChange(event: any) {
    const value = event.currentTarget.value;
    updateSelectedData(value);
    console.log(value, 'in select.tsx line 10');
    if (props.onSelectChange) props.onSelectChange(event);
}

方案二：传递当前选中值给父组件 #

如果父组件只需要选中值，不需要事件对象，直接传最新的value即可：

function handleChange(event: any) {
    const value = event.currentTarget.value;
    updateSelectedData(value);
    console.log(value, 'in select.tsx line 10');
    if (props.onSelectChange) props.onSelectChange(value);
}

同时父组件回调要对应修改，接收值而非事件：

function onSelectChange(selectedValue: string | number) {
   console.log(selectedValue);
}

优化建议 #

• 给组件添加明确的TypeScript类型定义，避免any类型引发的类型不匹配问题。
• 如果子组件不需要本地维护选中状态，可以移除selectedData，让父组件统一管理选中值，提升组件复用性。

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