0

我正在制作一个简单的性别选择器。为性别选择器使用第三方库：[https://github.com/instea/react-native-popup-menu]

yarn add react-native-popup-menu

和 Formik + 是的：

yarn add formik yup

我尝试了很多方法，但仍然无法获得性别的值，你能看看我的代码吗？

我想它需要添加类似 selectedItem 作为最终选择或类似的东西，因为它绝对是空的，事件不是 null 或 undefine .. 但我也不确定。

非常感谢您！

import { StyleSheet, Text, View ,Button} from 'react-native';
import React,{useState} from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';

import {
  Menu,
  MenuOptions,
  MenuOption,
  MenuTrigger,
} from 'react-native-popup-menu';

const valisationSchema = Yup.object().shape({
  gender:Yup.string().label("Gender"),
});
const UserEdit = () => {
  const [gender,setGender] = useState("Gender");
  const handleSubmit =(values)=>{
    const {gender} = values;
    console.log(`gender:${gender}`);
  }
  return (
  
     <View style={styles.container}>
    <Formik
    validationSchema={valisationSchema}
    initialValues = {{gender:''}}
    onSubmit = {values =>handleSubmit(values)}
    >{
      ({handleSubmit,setFieldValue,values})=>(
      <>
   
    
    {/**Gender */}

    <Menu >
      <MenuTrigger >
        <Text style={styles.menu}>{gender}</Text>
      </MenuTrigger>
      <MenuOptions>
        <MenuOption onSelect={() =>{ setFieldValue(values.gender,"female");setGender("Female")}} >
        <Text style={styles.menuTxt}>female</Text>
        </MenuOption>
        <MenuOption onSelect={() => { setFieldValue(values.gender,"male");setGender("Male")}}>
        <Text style={styles.menuTxt}>male</Text>
        </MenuOption>
        <MenuOption onSelect={() =>{ setFieldValue(values.gender,"other");setGender("Other")}}>
        <Text style={styles.menuTxt}>other</Text>
        </MenuOption>
      
      </MenuOptions>
    </Menu>

    <Button title={"Upload"} onPress={handleSubmit}/>
      </>)
    }

    </Formik>
     </View>

  
  )
}

export default UserEdit

const styles = StyleSheet.create({
  container :{
    flex:1,
    alignItems:'center',
    padding:30,
  },
  menu:{
    color: 'black',
    fontSize:16,
    paddingStart:16,
    paddingVertical:15,
    borderRadius:5,
    backgroundColor:'white',
    borderWidth :1,
    borderColor:'black'
    
  },
  menuTxt:{
    fontSize:20,
    color:'black',
    marginVertical:5,
  },
  
})
4

0 回答 0