Проверка формы с Formik и React Native - PullRequest
1 голос
/ 14 марта 2019

Я учусь создавать приложение, используя реактивный язык, и на одном из моих экранов есть пара компонентов 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. Я не передаю ни одного имени. Как передать имя (язык) сборщику. Могу ли я проверить ненулевое значение для selectedValue перед отправкой?

1 Ответ

2 голосов
/ 05 апреля 2019

В сумке formik есть реквизит с именем "setFieldValue", с помощью которого вы можете использовать его в своей реквизите onValueChange вашего сборщика следующим образом:

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

Теперь, когда вы отправляете форму, она будет передана вFormik с именем «language» и выбранной опцией.

...