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

在提交时,我将有一个方法名为: 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>
    )
  }
}

希望它能回答你的问题!