ReactJS - 前端表单错误处理程序/验证

Question

我正在用 ReactJS 构建一个简单的捐赠应用程序。这是一个工作版本:
https://stackblitz.com/edit/react-grzdgz

我从来没有做过表单错误验证。因此，如果有人没有填写某个字段，我希望弹出一条错误消息，上面写着“必须填写此字段”之类的内容。

我一直在尝试遵循本教程:
https://learnetto.com/blog/how-to-do-simple-form-validation-in-reactjs

但是我有点迷失了，关于如何将这些功能/错误消息传递到我的表单中，该表单位于一个单独的模块中。在演示中，所有内容都位于一个文件中。

但在我的应用程序中，我的表单与 index.js 分开。所以我在 index.js 中链接到它。

我快到了，我只需要一些帮助来连接一切。

任何人都可以帮助我进行表单错误验证吗？

错误处理函数都在这里:
https://stackblitz.com/edit/react-grzdgz

表单本身位于此处:
https://stackblitz.com/edit/react-grzdgz?file=components%2FForm.js

还有一些表单错误:
https://stackblitz.com/edit/react-grzdgz?file=components%2FFormErrors.js

任何帮助都会很棒!
谢谢!

Answer 1

在提交时，我会有一个名为:validateFields 的方法，它将像您想要的那样验证所有字段(而不是使用 html 的默认验证器，这在某些浏览器上不起作用)。在该方法中，我会保存所有有错误的字段。

如果错误列表(或对象)不为空，则使用警告或弹出 react-popup

如果没有错误，您可以调用提交方法。

基本上，它看起来像:

export default class DumbComponent extends React.Component {

  state = {} // all your field value

  validateField = () => {
    let error = []
    //Validate all your field

    if (error.length === 0) {
      this.submit()
    } else {
      this.showError() // You decide the way
    }
  }

  render() {
    return (
      <Form>
        <FieldOne />
        <Field2 />

        <SubmitButton onSubmit={this.validateField} />
      </Form>
    )
  }
}

希望它能回答你的问题!