PAYATHON 2026

React Native 子组件如何通过回调向父组件返回选中值？

数据阿明

结论

data.handleCallback 报错，是因为传入子组件的 data 中没有 handleCallback 函数。当前代码将 data 声明为 typeof dict，而 dict 是空对象 {}，类型中也没有回调函数。可以将选项数据和回调函数分别作为 props 传入：选项用于生成 SelectItem，回调用于把选中的值通知父组件。

子组件接收独立的回调 prop

可以将选项定义为字符串键值对，并单独提供 onValueChange 回调来处理选择变化：

interface Props {
  data: Record<string, string>;
  onValueChange: (value: string) => void;
}

const SelectorComponent: React.FC<Props> = ({ data, onValueChange }) => {
  const [selectedValue, setSelectedValue] = React.useState('');

  const handleChange = (itemValue: string) => {
    setSelectedValue(itemValue);
    onValueChange(itemValue);
  };

  return (
    <Select
      selectedValue={selectedValue}
      onValueChange={handleChange}
    >
      {/* 保留现有的 SelectTrigger、SelectPortal 等界面结构 */}
      <SelectContent>
        {Object.entries(data).map(([key, value]) => (
          <SelectItem key={key} label={key} value={value} />
        ))}
      </SelectContent>
    </Select>
  );
};

父组件可以这样传入选项对象和回调函数：

const options: Record<string, string> = {
  First: 'first',
  Second: 'second',
};

const ParentComponent = () => {
  const handleSelection = (value: string) => {
    console.log('父组件收到的选中值:', value);
  };

  return (
    <SelectorComponent
      data={options}
      onValueChange={handleSelection}
    />
  );
};

选择值变化时，子组件会调用 onValueChange(itemValue)，父组件中的 handleSelection 随即收到该值。示例沿用原代码通过 Object.entries(data) 生成选项的方式，界面部分可以替换为项目中现有的 gluestack-ui 组件。

如果要继续使用 data.handleCallback

也可以将回调放进 data，同时更新类型，并确保父组件传入了函数：

interface Props {
  data: Record<string, string> & {
    handleCallback: (value: string) => void;
  };
}

原代码会对 data 执行 Object.entries(data)。因此，如果把函数放进同一个对象，遍历时也会将它当作一项。通常把选项对象和回调函数分开传递会更清楚，也能避免回调被当成选项。

原代码中的 const dict = {} 没有定义选项或回调。无论采用哪种 props 结构，父组件都需要传入符合类型声明的选项数据和函数。Select 回调参数的具体类型应以当前使用的组件库类型为准；以上示例沿用原代码中的 string 值。

备注：内容仅供参考。