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

如果没有错误，则可以调用Submit方法。

基本上，它看起来像：

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

希望它能回答您的问题！

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

1 个答案: