React Native复用组件AppFormButtonGroup的onPress如何同时执行内部setFieldValue与外部自定义逻辑

我来帮你解决这个问题～你的核心需求是让组件内部的Formik字段更新逻辑和外部传入的自定义点击逻辑同时生效，其实只需要在组件内部把两个逻辑合并起来就行，具体做法如下：

1. 修改AppFormButtonGroup组件的 onPress 处理逻辑 #

在你的AppFormButtonGroup.js里，不要直接把外部传入的onPress传给底层的ButtonGroup，而是自己封装一个处理函数，先执行内部的setFieldValue，再调用外部的onPress（如果存在的话）。

完整的组件代码示例：

import { useFormikContext } from 'formik';
// 假设你导入了ButtonGroup组件

const AppFormButtonGroup = ({ buttons, name, onPress, selectedIndex, ...props }) => {
  const { setFieldValue } = useFormikContext();

  // 封装合并后的点击处理函数
  const handlePress = (value) => {
    // 第一步：执行组件内部的Formik字段更新逻辑
    setFieldValue(name, value);
    // 第二步：如果外部传入了onPress，就执行自定义逻辑
    if (onPress) {
      onPress(value);
    }
  };

  return (
    <ButtonGroup
      buttons={buttons}
      selectedIndex={selectedIndex}
      onPress={handlePress} // 用封装后的函数代替原onPress
      {...props}
    />
  );
};

export default AppFormButtonGroup;

2. 外部使用保持原有代码即可 #

在AnotherFile.js里，你原来的用法完全不需要改动，点击按钮时会先执行组件内部的setFieldValue(name, value)，再执行你写的自定义逻辑：

<AppFormButtonGroup
  name="country"
  buttons={countries}
  selectedIndex={selectedCountryIndex}
  onPress={(value) => {
    setCountry(countries[value])
    setSelectedCountryIndex(value)
    setIsCountrySheetVisible(false)
  }}
  value={country}
/>

为什么你之前的尝试没生效？ #

• 你写的onPress={[onPress,setFieldValue(name, value)]}是错误的：onPress需要接收一个函数，而不是数组；而且setFieldValue(name, value)会在组件渲染时立即执行，不是点击按钮时才执行。
• 在外部文件用useFormikContext无效，大概率是因为那个组件不在Formik的上下文范围内（比如没有被Formik组件包裹），所以拿不到setFieldValue。

额外优化建议 #

如果你的外部逻辑需要依赖setFieldValue执行后的状态，也可以调整顺序（先执行外部逻辑再执行内部），但通常表单字段更新是基础逻辑，放在前面更合理。另外，如果外部不需要自定义逻辑，不传onPress参数也完全没问题，组件依然会正常更新Formik字段。

备注：内容来源于stack exchange，提问作者serking