Как проверить форму в реагирующих - PullRequest
Новая
       9

Как проверить форму в реагирующих

0 голосов
/ 05 декабря 2018

Я работаю над проектом в responsejs, я реализовал некоторую проверку в форме.Я реализовал логику, если кто-то нажимает на кнопку «Далее», не загружая фото и видео, а затем отображает ошибку для пользователя, проверка работает нормально с первой попытки, но когда пользователь удаляет фотографию или видео, затем нажимает «Далее», форма не проверяется.Не могли бы вы помочь мне, как проверить форму Я использую форму ant-design Я поделюсь с вами кодом, пожалуйста, помогите мне, я действительно застрял

Пожалуйста, просмотрите изображение формы

Код 

 <Form onSubmit={this.handleSubmit}>
      <FormItem>
        {getFieldDecorator('picture', {
          rules: [
            {
              required: true,
              message: 'Please upload picture!',
            },
          ],
        })(
          <Dragger {...props}>
            <p className="ant-upload-drag-icon">
              <Icon type="upload" />
            </p>
            <p className="ant-upload-text">
              Click or drag photo to this area to upload
            </p>
          </Dragger>,
        )}
      </FormItem>

      <PhotoText>Select a Video to Upload</PhotoText>
      <FormItem>
        {getFieldDecorator('video', {
          rules: [
            {
              required: true,
              message: 'Please upload video!',
            },
          ],
        })(
          <Dragger>
          <p className="ant-upload-drag-icon">
            <Icon type="upload" />
          </p>
          <p className="ant-upload-text">
            Click or drag Video to this area to upload
          </p>
        </Dragger>,
        )}
      </FormItem>
    </Form>

1 Ответ

0 голосов
/ 05 декабря 2018

Так как вы используете форму мастера, вам нужно передавать this.props.form на каждом шаге, как указано ниже: 

<Step1 form={this.props.form} />

А затем в next() вы можете использовать validateFieldsAndScroll для проверки правильности, как указано ниже: 

next() {
    if (this.state.current == 0) {
        this.props.form.validateFieldsAndScroll(["picture"], (err, values) => {
            if (!err) {
                const current = this.state.current + 1;
                this.setState({ current });
            }
        });
    }
}

Я создал рабочую демонстрацию .

Редактировать

Тогда вам нужно каким-то образом написать свою собственную логику, потому что я не думаю, что Ant-design предоставляет такую ​​функциональность.Например, вместо if (!err) вы можете написать следующее: 

if (!err && values.picture && values.picture.fileList.length > 0)

И затем вы можете написать некоторую логику для отображения пользовательского сообщения проверки в виде: 

{picture && picture.fileList.length <= 0 ? "Please upload picture!" : ""}

Пожалуйста, отметьте обновленная демоверсия .

...