Значение из селектора не работает с проверкой Formik и Yup

Существует страница создания компании, где пользователь должен ввести данные в некоторые поля, которые проверяются 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, который является выбором, это не так?


person Leo Messi    schedule 19.08.2020    source источник


Ответы (1)


Это не работает с Select, потому что Formik не знает, как установить его значение. Вам нужно будет реализовать это самостоятельно:

<Field
    name="industry"
    as={Select}
    options={industryOptions}
    placeholder="Food service"
    onChange={(e) => setFieldValue("industry", e.target.value)}
/>

Уничтожьте setFieldValue из Form рендеринга.

person domenikk    schedule 19.08.2020