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, который не работает в некоторых браузерах). В методе я бы сохранил все поля с ошибкой.

Если список ошибок (или объект) не пуст, вы используете предупреждение или всплывающее окно реагировать-всплывающее окно

Если ошибок нет, вы можете вызвать метод 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>
    )
  }
}

Надеюсь, это ответит на ваш вопрос!