React native “UI Kitten”选择不呈现值的组件

我正在使用react-naitve与UI kitten和formik构建一个注册表。我正在使用formik中ui kitten的选择组件。我无法从组件获取所选值。它在console.warn中为我提供所选项目的索引，而所选项目不显示在字段中。它可以与输入和日期选择器组件配合使用

    const formSchema = yup.object({
    name: yup.string().required("*Full Name is required"),
    gender: yup.string().required("*Gender is required"),
    dob: yup.string().required("*Date of birth is required"),})

    export default class Registration extends Component {
    render() {
        return (
            <Formik
                validationSchema={formSchema}
                initialValues={{
                    name: '',
                    gender: '',
                    dob: '',
                }}
                onSubmit={(values) => {
                    console.log(values)
                }}
            >
                {(props) => (

                    <ScrollView style={styles.containerStyle}>
                        <LinearGradient style={{ height: '100%' }}
                            colors={["#0C1248", "#D03737"]}>
                            <ScrollView contentContainerStyle={styles.scrollViewStyle}>
                                <Text style={styles.textStyle} category='h2'>Registration</Text>
                                <Input
                                    style={styles.inputView}
                                    value={props.values.name}
                                    status='primary'
                                    placeholder="Full Name"
                                    onChangeText={props.handleChange('name')}
                                />

                                <Text style={styles.errorText}>{props.touched.name && props.errors.name}</Text>

                                <Datepicker
                                    style={styles.inputView}
                                    date={props.values.dob}
                                    placeholder="Date of birth"
                                    onSelect={(dob) => { props.setFieldValue('dob', dob) }}
                                />

                                <Text style={styles.errorText}>{props.touched.dob && props.errors.dob}</Text>

                                <Select
                                    style={styles.inputView}
                                    value={props.values.gender}
                                    placeholder='Gender'
                                    onSelect={item => props.setFieldValue(
                                       'gender', item.value
                                    )}
                                >
                                    <SelectItem title='Male' />
                                    <SelectItem title='Female' />
                                </Select>

                              

                                <TouchableOpacity style={{ alignItems: "center", justifyContent: 'center' }}>
                                    <LinearGradient style={{ width: width / 1.25, padding: 12, borderRadius: 30 }}
                                        colors={["#D03737", "#0C1248"]}>
                                        <Text style={{ color: "white", textAlign: "center" }} onPress={props.handleSubmit}>Next</Text>
                                    </LinearGradient>
                                </TouchableOpacity>
                            </ScrollView>
                        </LinearGradient>
                    </ScrollView>

                )}
            </Formik>
        );
    }
}

---

您应该参考文档

选择组件没有值属性，它有一个selectedIndex属性，该属性将选择给定索引上的项

在你的情况下，你可以这样做

<Select
style={styles.inputView}
value={props.values.gender}
placeholder='Gender'
onSelect={item => props.setFieldValue(
'gender', item.row == 0 ? 'Male' : 'Female'
)}
>
<SelectItem title='Male' />
<SelectItem title='Female' />
</Select>

---

根据状态值，可以找到索引，反之亦然。这将确保Select始终获取索引值，并且您的状态始终具有字符串。

我尝试了这个方法。但是它给了我一个错误-selectedIndex.equals不是一个函数。在“selectedIndex.equalsindex”中，“selectedIndex.equals”是未定义的“selectedIndex.equals”是代码的一部分，或者它是库本身的一部分？确定找到它，您必须使用React.useStatenew IndexPath 0；检查我提供的页面我正在使用类组件，因此我不能使用react-Hooks，但您必须使用新的IndexPath0作为默认值