Существует страница создания компании, где пользователь должен ввести данные в некоторые поля, которые проверяются Formik и Yup, чтобы создать запись. Все поля обязательны.
Проблема заключается в полях, которые не вводятся путем записи внутри ввода, а выбираются из раскрывающегося списка. Независимо от того, что выбрано, значение не используется, и запись не создается, говоря, что это поле является обязательным.
Это код:
import React from 'react';
import { Formik, Form, Field } from 'formik';
import { Input, Button, Select, Label, Grid } from 'semantic-ui-react';
import * as Yup from 'yup';
class CreateCompanyForm extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
name: '',
industry: '',
};
}
handleSubmitCreate = e => {
e.preventDefault();
const { createCompany, getCompanies } = this.props;
createCompany(this.state);
this.setState({ redirectCreate: true });
getCompanies(this.props.query);
};
render() {
const industryOptions = [
{ text: 'Retail', value: 'Retail' },
{ text: 'Food', value: 'Food' },
];
const initialValues = {
name: '',
industry: '',
};
const requiredErrorMessage = 'This field is required';
const validationSchema = Yup.object({
name: Yup.string().required(requiredErrorMessage),
industry: Yup.string().required(requiredErrorMessage),
});
return (
<Layout create>
<OneColumn>
<div>
<Button type="submit" form="amazing">
Create company
</Button>
</div>
</OneColumn>
<Formik
htmlFor="amazing"
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={values => this.handleSubmit(values)}>
{({ values, errors, touched, setValues }) => (
<Form id="amazing">
<Grid columns={2}>
<Grid.Column>
<Label>Company Name</Label>
<Field name="name" as={Input} placeholder="Hello" />
<div>{touched.name && errors.name ? errors.name : null}</div>
</Grid.Column>
<Grid.Column>
<Label>Industry</Label>
<Field
name="industry"
as={Select}
options={industryOptions}
placeholder="Food service"
/>
<div className="add-fridge-error">
{touched.industry && errors.industry
? errors.industry
: null}
</div>
</Grid.Column>
</Grid>
</Form>
)}
</Formik>
</Layout>
);
}
}
Есть идеи, почему для name
ввода он работает нормально, но для industry
, который является выбором, это не так?