React Native Element Dropdown，將下拉選擇的值傳遞給父組件

Question

我試圖將從子組件下拉選擇器中選擇的值傳遞給父組件並將其存儲到 formik 中。 但我似乎無法弄清楚。

Github react-native-element-dropdown package 使用： https://www.npmjs.com/package/react-native-element-dropdown

父組件：

import React from "react";
import { Formik } from "formik";
import StyledPicker from "../Inputs/StyledPicker";

const Dashboard = () => {
  return (
        <View>
          <Formik
            initialValues={{     
              kgLb: "",
            }}
            onSubmit={(values, { setSubmitting }) => {
              if (values.kgLb == "") {
                setMessage("Please fill in fields to procced.");
                setSubmitting(false);
              } else {}
            }}
          >
            {({
              handleChange,
              handleBlur,
              handleSubmit,
              values,
              isSubmitting,
            }) => (
                    <StyledPicker
                      label="Enter Kg Or Lb:"
                      icon="fitness-center"              
                      keyboardType="default"
                      onChangeText={handleChange("kgLb")}
                      onBlur={handleBlur("kgLb")}
                      value={values.kgLb}
                    />
                )
            }

               {!isSubmitting && (
                  <RegularButton
                    style={{ marginBottom: 5 }}
                    onPress={handleSubmit}
                  >
                    {buttonText || `Complete`}
                  </RegularButton>
                )}
                {isSubmitting && (
                  <RegularButton style={{ marginBottom: 5 }}>
                    <ActivityIndicator size="small" color="primary" />
                  </RegularButton>
                )}
          </Formik>
        </View>
  );
};

export default Dashboard;

子組件：

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 = ({ ...props }) => {
  const [value, setValue] = useState(null);
  const [isFocus, setIsFocus] = useState(false);
  console.log(value);

  return (
    <View>
      {/* Picker/Dropdown isn't submiting the value to the parent component */}
          <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..."
            value={value}
            onFocus={() => setIsFocus(true)}
            onBlur={() => setIsFocus(false)}
            onChange={(item) => {
              setValue(item.value);
              setIsFocus(false);
            }}
          />
      )}
    </View>
  );
};

export default StyledPicker;

Answer 1

讓樣式選擇器在道具中收到一個 onChange function ！

在孩子身上：

onChange={(item) => {
   setValue(item.value);
   setIsFocus(false);
   props.onChange(item)
}}

在父母中：

// set a use state with the dropdown value
const [dropdownValue, setDropdownValue] = useState()

    //...
    <
    Formik
initialValues = {
    {
        kgLb: "",
    }
}
onSubmit = {
        (values, {
            setSubmitting
        }) => {
            if (values.kgLb == "") {
                setMessage("Please fill in fields to procced.");
                // here you can do something with dropdown value
                setSubmitting(false);
            } else {}
        }
    } >

    //...

    <
    StyledPicker
label = "Enter Kg Or Lb:"
icon = "fitness-center"
keyboardType = "default"
onChangeText = {
    handleChange("kgLb")
}
onBlur = {
    handleBlur("kgLb")
}
value = {
    values.kgLb
}
onChange = {
    setDropdownValue
}
/>