有没有办法让我在 formik 状态下传递我的性别？

Question

我是 React Native 的新手，我想创建一个表单。我正在为此使用 formik。我还添加了 react-native-dropdown-picker，因为 react-native 的选择器在 android 上的占位符有问题。我想将我在下拉列表中使用的性别属性传递给状态。有什么办法可以做到吗？

import React, {Component} from 'react'
import { StyleSheet, Button, TextInput, View, } from 'react-native'
import { Formik } from 'formik';
import DropDownPicker from 'react-native-dropdown-picker';

export default class Registration extends Component{
    render() {
    return (
        <View>
            <Formik
                initialValues={{ fullName: '', mobileNumber: '', country: '', gender: '', password: '', email: '' }}
                onSubmit={(values) => {
                    console.log(values)
                }}
            >
        {(props) => (
              <View>
              <TextInput style={styles.input}
              placeholder="Full Name"
              onChangeText={props.handleChange('fullName')}
              value={props.values.fullName}
              >
              </TextInput>            
              <TextInput style={styles.input}
              placeholder="Mobile Number"
              keyboardType="numeric"
              onChangeText={props.handleChange('mobileNumber')}
              value={props.values.mobileNumber}
              >
              </TextInput>     

              <TextInput style={styles.input}
              placeholder="Country"
              onChangeText={props.handleChange('country')}
              value={props.values.country}
              >
              </TextInput>     


            <DropDownPicker
                items={[
                    {label: 'Male', value: 'male'},
                    {label: 'Female', value: 'female'},
                ]}
                defaultValue={props.values.gender}
                placeholder="Select your gender"
                containerStyle={{height: 40}}
                style={{backgroundColor: '#fafafa'}}
                itemStyle={{
                    justifyContent: 'flex-start'
                }}
                dropDownStyle={{backgroundColor: '#fafafa'}}
                onChangeItem={item => props.setState({
                    gender: item.value
                })}
            />


            <TextInput style={styles.input}
              placeholder="Email"
              onChangeText={props.handleChange('email')}
              value={props.values.email}
              >
              </TextInput>     

              
            <TextInput style={styles.input}
              placeholder="Password"
              secureTextEntry={true}
              onChangeText={props.handleChange('password')}
              value={props.values.password}
              >
              </TextInput>    

            <Button title="Submit" color="blue" onPress={props.handleSubmit}></Button>
           </View>
        )}
            </Formik>
        </View>
    )
    }
}

const styles = StyleSheet.create({
    input: {
        borderWidth: 1,
        borderColor: "#ddd",
        padding: 10,
        fontSize: 18,
        borderRadius: 6
    }
})

Answer 1

我找到了答案。 formik 有一个名为 set field value 的方法，它可以更新下拉菜单的状态

            <DropDownPicker
            items={[
                { label: 'Male', value: 'male' },
                { label: 'Female', value: 'female' },
            ]}
            value={props.values.gender}
            placeholder="Select your gender"
            containerStyle={{ height: 40 }}
            onBlur={props.handleBlur('gender')}
            style={{ backgroundColor: '#fafafa' }}
            itemStyle={{
                justifyContent: 'flex-start'
            }}
            dropDownStyle={{ backgroundColor: '#fafafa' }}
            onChangeItem={item => props.setFieldValue(
                'gender', item.value
            )}
        />

Answer 2

5.2 版 DropDownPicker item 是一个函数。必须做的事情：

 <DropDownPicker
   ...
   onChangeItem={item => props.setFieldValue(
     'gender', item()
   )}
 />

有没有办法让我在 formik 状态下传递我的性别？

Is there a way i can pass my gender in the formik state?

javascript

mobile-development

react-native

formik

react-state