Блог

Главная - Вопросы по программированию - Как очистить список, чтобы очистить поле ввода после отправки формы?

Как очистить список, чтобы очистить поле ввода после отправки формы?

#javascript #reactjs

Вопрос:

Я пытаюсь разработать форму с помощью React-начальной загрузки и с помощью Form.Control.Обратная связь, чтобы показать ошибки.

Что я хочу сделать сейчас, так это после того, как пользователь успешно отправил форму, оба поля ввода будут очищены, так что, если пользователь захочет отправить снова, страница reload/refresh не понадобится.

Однако, похоже, я не могу заставить его работать с помощью setForm({}) , так как я получу ошибку length.undefined после повторной отправки.

Редактировать ретивый-mopsa-o39nb

Комментарии:

1. Похоже, вы не используете входные значения из своего состояния. Это означает, что они не похожи на контролируемый компонент.

Ответ №1:

Вам потребуется внести несколько изменений в свой код:

  • Во-первых, проверяйте наличие ошибок только в том случае, если ваша форма не пуста:
 const newErrors = form amp;amp; findFormErrors();  // <-- Check for form is not empty first
  • Во-вторых, сделайте свой ввод контролируемым компонентом, добавив в него значения из состояния:
 <Form.Control
  type="text"
  placeholder="Enter Name"
  value={form.name}  // <-- HERE
  onChange={(e) => setField("name", e.target.value)}
  isInvalid={!!errors.name}
  required
/>;
  • Наконец, инициализируйте свое состояние пустыми значениями, чтобы ошибка о неконтролируемом компоненте для контролируемого компонента не отображалась.
 const [form, setForm] = useState({ name: "", password: "" });

Рабочий пример:

Редактировать смешно-черный-irdy1

Ответ №2:

   const onSubmit = (e) => {
    e.preventDefault();

    const newErrors = findFormErrors();
    // Conditional logic:
    if (Object.keys(newErrors).length > 0) {
      // We got errors!
      setErrors(newErrors);
    } else {
      // No errors! Put any logic here for the form submission!
      alert("Thank you for your feedback! "   form.name   " "   form.password);
      setForm({ name: "", password: "" });  **// This was added**
      console.log(form);
    }
  };

........................................
        <Col sm="6">
          <Form.Control
            type="text"
            value={form.name} **// This was added**
            placeholder="Enter Name"
            onChange={(e) => setField("name", e.target.value)}
            isInvalid={!!errors.name}
            required
          />
          <Form.Control.Feedback type="invalid">
            {errors.name}
          </Form.Control.Feedback>
        </Col>
      </Form.Group>
      <Form.Group as={Row} className="mb-3">
        <Form.Label className="fw-bold" column sm="4">
          Password
        </Form.Label>
        <Col sm="6">
          <Form.Control
            type="password"
            value={form.password} **// This was added**
            placeholder="New Password"
            onChange={(e) => setField("password", e.target.value)}
            isInvalid={!!errors.password}
            required
          />
          <Form.Control.Feedback type="invalid">
            {errors.password}
          </Form.Control.Feedback>
        </Col>
      </Form.Group>

..................................

Требовалось внести несколько изменений.

  1. Установка setForm({ name: "", password: "" }); .
  2. Установка значения для полей ввода.
Метки: ,