Блог

Я пытаюсь очистить 2 поля в форме с помощью кнопки X, которая показана на рисунке. Когда 1 из 2 полей имеет значение, в форме отображается ошибка (это нормальное поведение), у меня отображается 1 ошибка, если 1 из двух полей пустое (условие — два поля пустые или два поля заполнены), но когда я нажимаю на кнопку X, эта ошибка должна быть удалена, потому что два поля могут быть пустыми, у меня проблема в том, что ошибка не скрывается при нажатии на кнопку X (эта ошибка должна исчезнуть).

Вы можете увидеть два поля здесь:

Кажется, что проверка формы не проверяется нормально, потому что форма не обновляет сообщения, которые должны отображаться в форме. (Я выполняю эти действия в файле поля компонента Field.jsx, а проверка FormValidation выполняется в основной форме создания файла Form.jsx). Моя кнопка объявлена таким образом:

 <button
  id="button__value_input"
  name="button_reset"
  type="button"
  className={styles['button']}
  onClick={() => this.resetFields(slug)}
>
  

Я думаю, что я должен отправить подтверждение обновления ошибки из файла дочернего компонента (поле, которое находится внутри формы) в файл родительского компонента (форма), но каким образом я могу отправить обновление ошибки от дочерних компонентов родительскому, который должен обновить и удалить сообщение об ошибке (потому что при нажатии на X сообщения об ошибках должны исчезнуть правильным способом очистки двух полей).

Когда я вношу изменения в поля ввода, ошибки проверки формы обновляются, но с помощью этой кнопки сброса, которая очищает поля, обновление ошибки не отражается в поле родительского компонента.

У меня есть файл проверки формы импорта в Field.jsx:

 import validateForm from '../../Form/formValidation';
  

Но у меня есть проверка валидаций в родительском компоненте Form.jsx:

 validate = (values) => {
    const errors = validate(values);
    //here are returned the errors:
    return Object.keys(errors).reduce(
      (prev, next) => ({ ...prev, [next]: this.props.intl.formatMessage({ id: errors[next] }) }),
      {},
    );
  

};

Если я выполняю console.log строку ошибок up, то при обновлении входных данных она будет оценена, но не оценена в Field.jsx поле при нажатии кнопки up.

Заранее спасибо за ваше время и помощь.