时间戳

首页 > 解决方案 > “UI-Kitten”选择组件不呈现值

react-native - “UI-Kitten”选择组件不呈现值

问题描述

我正在使用 react naitveUI-kitten来formik构建注册表单。我正在使用ui kitten内部的选择组件formik。我无法从组件中获取选定的值。它给了我所选项目的索引，(in console.warn())并且所选项目不会出现在该字段中。它适用于输入和datePicker组件。

    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>
        );
    }
}

标签： react-nativeformikreact-native-ui-kitten

解决方案

您应该参考文档 https://akveo.github.io/react-native-ui-kitten/docs/components/select/overview#select

select 组件没有 value 道具，它有一个 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 始终获得索引值，并且您的状态始终具有字符串。

推荐阅读