React Native Element Dropdown：将下拉选择值传递至父组件

我看了你的代码，问题核心很明确：子组件StyledPicker把选中值存在了自己的本地状态里，完全没通知父组件的Formik更新状态。你现在的逻辑是选完值只更新子组件自己的value，Formik根本不知道发生了变化，自然拿不到选中的值。

下面是修复方案，只需要调整你的StyledPicker组件：

修改后的子组件代码 #

import React, { useState } from "react";
import { View } from "react-native";
import { Dropdown } from "react-native-element-dropdown";

const data = [
  { label: "KG", value: "KG" },
  { label: "LB", value: "LB" },
];

const StyledPicker = ({ value, onChangeText, ...props }) => {
  const [isFocus, setIsFocus] = useState(false);

  return (
    <View>
      <Dropdown
        {...props}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        data={data}
        search
        maxHeight={300}
        labelField="label"
        valueField="value"
        placeholder={!isFocus ? "Example: Kg - Lb" : "..."}
        searchPlaceholder="Search..."
        // 直接用父组件Formik传过来的value，不再维护本地value状态
        value={value}
        onFocus={() => setIsFocus(true)}
        onBlur={() => setIsFocus(false)}
        onChange={(item) => {
          // 调用父组件的onChangeText，把选中的值同步给Formik
          onChangeText(item.value);
          setIsFocus(false);
        }}
      />
    </View>
  );
};

export default StyledPicker;

关键修改点说明 #

1. 移除本地value状态：子组件不需要自己存选中值，直接用父组件Formik传递过来的value（也就是values.kgLb），保证状态唯一来源是Formik
2. 同步回调给父组件：在Dropdown的onChange事件里，必须调用父组件传过来的onChangeText方法，把选中的item.value传回去，这样Formik才能更新对应的字段值
3. 保留isFocus状态：这个状态用来控制placeholder的显示逻辑，属于子组件自己的UI状态，保留没问题

父组件无需调整 #

你的父组件已经正确传递了onChangeText={handleChange("kgLb")}和value={values.kgLb}，修改子组件后，选中Dropdown选项时，Formik的values.kgLb会立刻同步更新，提交表单时就能拿到正确的选中值了。

测试一下：选中KG或LB后，Formik的values里的kgLb会变成对应的字符串，提交时就不会触发"请填写字段以继续"的提示了。

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