react-native-element-dropdown返回undefined,onchange在第二个下拉列表中不起作用

lrl1mhuk  于 2023-01-18  发布在  React
关注(0)|答案(3)|浏览(155)

我从react原生元素下拉菜单中有两个下拉菜单,第一个工作正常,当我选择restaurant选项时,我显示第二个下拉菜单,但这个onChange总是返回undefined。
下面是我的代码

export function EcoForm(props) {
  const { formik } = props;
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => {
    setIsEnabled((previousState) => !previousState);
    formik.setFieldValue("eco", isEnabled);
  };
  const dataBusinessType = [
    { label: "Restaurant", value: "restaurant" },
    { label: "Shop", value: "shop" },
    { label: "Acomodation", value: "acomodation" },
  ];
  const dataRestaurantType = [
    { label: "RestaurantTYpe", value: "restaurantType" },
    { label: "Cofee/Bakery", value: "cofee/Bakery" },
  ];

  const [value, setValue] = useState(null);
  const [valueRestaurantType, setValueRestaurantType] = useState(null);

  // console.log(isEnabled);
  return (
    <View style={styles.content}>
      <Text style={styles.text}>Is the business Ecofriendly?</Text>

      <Dropdown
        style={styles.dropdown}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        data={dataBusinessType}
        search
        maxHeight={300}
        labelField="label"
        valueField="value"
        placeholder="Select business type"
        searchPlaceholder="Search..."
        value={value}
        onChange={(item) => {
          setValue(item.value);
          formik.setFieldValue("businessType", value);
        }}
        renderLeftIcon={() => (
          <AntDesign
            style={styles.icon}
            color="black"
            name="Safety"
            size={20}
          />
        )}
      />
      {value === "restaurant" ? (
        <>

          <Dropdown
            style={styles.dropdown}
            placeholderStyle={styles.placeholderStyle}
            selectedTextStyle={styles.selectedTextStyle}
            inputSearchStyle={styles.inputSearchStyle}
            iconStyle={styles.iconStyle}
            data={dataRestaurantType}
            search
            maxHeight={300}
            labelField="label"
            valueField="value"
            placeholder="Select restaurant type"
            searchPlaceholder="Search..."
            value={valueRestaurantType}
            onChange={(item) => {
              setValueRestaurantType(item.valueRestaurantType);
              formik.setFieldValue("restauranType", valueRestaurantType);
              console.log("a ver ", valueRestaurantType);
            }}
            renderLeftIcon={() => (
              <AntDesign
                style={styles.icon}
                color="black"
                name="Safety"
                size={20}
              />
            )}
          /> 

          <CheckBox
            title="Eco friendly"
            checked={isEnabled}
            onPress={() => toggleSwitch()}
          />
          <CheckBox
            title="Vegan"
            checked={isEnabled}
            onPress={() => toggleSwitch()}
          />
        </>
      
      ) : null}
    </View>
  );
}

我也试过用第二个下拉菜单创建一个组件并导入它,但行为是完全相同的。不知道我错过了什么。

zzlelutf

zzlelutf1#

正如我所看到的,react中的下拉组件没有任何名为Data的参数。
尝试使用以下选项更改数据。

<Dropdown
            style={styles.dropdown}
            placeholderStyle={styles.placeholderStyle}
            selectedTextStyle={styles.selectedTextStyle}
            inputSearchStyle={styles.inputSearchStyle}
            iconStyle={styles.iconStyle}
            options={dataRestaurantType}
            search
            maxHeight={300}
            labelField="label"
            valueField="value"
            placeholder="Select restaurant type"
            searchPlaceholder="Search..."
            value={valueRestaurantType}
            onChange={(item) => {
              setValueRestaurantType(item.valueRestaurantType);
              formik.setFieldValue("restauranType", valueRestaurantType);
              console.log("a ver ", valueRestaurantType);
            }}
            renderLeftIcon={() => (
              <AntDesign
                style={styles.icon}
                color="black"
                name="Safety"
                size={20}
              />
            )}
          />

试试吧,在我的情况下很有效。

cpjpxq1n

cpjpxq1n2#

检查下面的代码它的工作正常,请检查下面的日志SS:

import React, { memo, useEffect, useRef, useState } from 'react';
import { Text, View, StyleSheet,CheckBox } from 'react-native';
import Constants from 'expo-constants';
  import { Dropdown } from 'react-native-element-dropdown';
  import AntDesign from 'react-native-vector-icons/AntDesign';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App(props) {
  const { formik } = props;
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => {
    setIsEnabled((previousState) => !previousState);
    formik.setFieldValue("eco", isEnabled);
  };
  const dataBusinessType = [
    { label: "Restaurant", value: "restaurant" },
    { label: "Shop", value: "shop" },
    { label: "Acomodation", value: "acomodation" },
  ];
  const dataRestaurantType = [
    { label: "RestaurantTYpe", value: "restaurantType" },
    { label: "Cofee/Bakery", value: "cofee/Bakery" },
  ];

  const [value, setValue] = useState(null);
  const [valueRestaurantType, setValueRestaurantType] = useState(null);

  // console.log(isEnabled);
  return (
    <View style={styles.content}>
      <Text style={styles.text}>Is the business Ecofriendly?</Text>

      <Dropdown
        style={styles.dropdown}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        data={dataBusinessType}
        search
        maxHeight={300}
        labelField="label"
        valueField="value"
        placeholder="Select business type"
        searchPlaceholder="Search..."
        value={value}
        onChange={(item) => {
          console.log("item==>",item)
          setValue(item.value);
          formik.setFieldValue("businessType", value);
        }}
        renderLeftIcon={() => (
          <AntDesign
            style={styles.icon}
            color="black"
            name="Safety"
            size={20}
          />
        )}
      />
      {value === "restaurant" ? (
        <>

          <Dropdown
            style={styles.dropdown}
            placeholderStyle={styles.placeholderStyle}
            selectedTextStyle={styles.selectedTextStyle}
            inputSearchStyle={styles.inputSearchStyle}
            iconStyle={styles.iconStyle}
            data={dataRestaurantType}
            search
            maxHeight={300}
            labelField="label"
            valueField="value"
            placeholder="Select restaurant type"
            searchPlaceholder="Search..."
            value={valueRestaurantType}
            onChange={(item) => {
                            console.log("a ver ", item);
              setValueRestaurantType(item.valueRestaurantType);
              formik.setFieldValue("restauranType", item.valueRestaurantType);
            }}
            renderLeftIcon={() => (
              <AntDesign
                style={styles.icon}
                color="black"
                name="Safety"
                size={20}
              />
            )}
          /> 

          <CheckBox
            title="Eco friendly"
            checked={isEnabled}
            onPress={() => toggleSwitch()}
          />
          <CheckBox
            title="Vegan"
            checked={isEnabled}
            onPress={() => toggleSwitch()}
          />
        </>
      
      ) : null}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});
dfddblmv

dfddblmv3#

我希望这对你有帮助

const App=()=>{
retutn( 
<Dropdown
            style={[style.dropdown1, isFocus && { borderColor: 'blue' }]}
            selectedTextStyle={style.selectedTextStyle1}
            data={data}
            maxHeight={300}
            labelField="label"
            valueField="value"
            placeholder={!isFocus ? 'Personal' : ''}
            onFocus={() => setIsFocus(true)}
            onBlur={() => setIsFocus(false)}
            onChange={item => {
              setValue(item.label);
              setIsFocus(false);
            }}
          />
)
}
const styel=styleSheet.create({
 dropdown1: {
    height: 50,
    width: 350,
    marginLeft: 15,
    borderColor: 'gray',
    //borderWidth: 0.5,
    borderRadius: 8,
    paddingHorizontal: 8,
  },
 selectedTextStyle1: {
    fontSize: 16,
  },
})

相关问题