时间戳

首页 > 解决方案 > 使用 Formik 和 React Native 进行表单验证

reactjs - 使用 Formik 和 React Native 进行表单验证

问题描述

我正在学习使用 react-native 构建应用程序，我的一个屏幕有几个 Picker 组件。我想在提交之前对它们进行一些基本的验证。我想确保 Picker 的值不为空。我正在尝试为此使用Formik并且有点困惑。我的代码看起来像这样（精简）：

<View style={{flex:1, alignItems:'center'}}>
<Formik
    initialValues={{ language: ''}}
    onSubmit={this.handleSubmit}
    validationSchema={yup.object().shape({
    language: yup
        .string()
        .required()
    })}
>
    {({ values, handleChange, errors, setFieldTouched, touched, isValid, handleSubmit }) => (
    <Fragment>
        <View style={{borderRadius: 3, borderWidth: 1}}>
            <Picker style={{ height: 40, width: 400}}
                mode='dropdown'
                prompt={'Select language'}
                itemStyle={{ backgroundColor: "grey"}}
                selectedValue={this.state.selectedLanguage}
                onValueChange={(itemValue, itemIndex) => 
                    this.setState({selectedLanguage: itemValue})}>
                    <Picker.Item label='Select your language' value={null} key={0}/>
                    <Picker.Item label='Java' value={1} key={1}/>
                    <Picker.Item label='Python' value={2} key={2}/>
                    <Picker.Item label='Scala' value={3} key={3}/>
            </Picker>
        </View>

        <Button title='Submit' onPress={() => {
        this.handleSubmit()
        }}/>
    </Fragment>
    )}
</Formik>
</View>

我的问题：Formik 如何映射到我的 Picker 组件。我没有传递任何名字。如何将名称（语言）传递给 Picker。我可以在提交之前验证 selectedValue 的非空值吗？

标签： reactjsreact-nativereact-native-androidformik

解决方案

formik 包有一个名为“setFieldValue”的道具，您可以在选择器的 onValueChange 道具中使用它，如下所示：

onValueChange={(itemValue, itemIndex) => {
    setFieldValue('langauge', itemValue)
    this.setState({selectedLanguage: itemValue})
}

现在，当您提交表单时，它将以名称“语言”和选定的选项传递给 formik。

推荐阅读