如何在 reactjs 中验证表单

Question

我正在处理 reactjs 中的项目，我在表单中实现了一些验证。我实现了一个逻辑，如果有人在没有上传照片和视频的情况下单击下一步然后向用户显示错误，验证在第一次尝试它工作时工作正常，但是当用户删除照片或视频然后单击下一步时，表单没有验证。你能帮我如何验证表单我正在使用 ant-design 表单我将与你分享代码请帮助我我真的卡住了

Please View Image of Form

代码

 <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>

Answer 1

由于您使用的是向导表单，因此您需要在每个步骤中传递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 });
            }
        });
    }
}

我创建了一个working demo。

编辑

然后，您需要以某种方式编写自己的逻辑，因为我认为 Ant-design 不提供这样的功能。例如，代替if (!err)，您可以编写如下：

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

然后您可以编写一些逻辑来显示自定义验证消息：

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

请查看updated demo。