Как я могу заставить event.stopPropagation () работать для поля ввода внутри формы? - PullRequest
Новая
       48

Как я могу заставить event.stopPropagation () работать для поля ввода внутри формы?

0 голосов
/ 07 марта 2020

У меня есть форма с несколькими полями ввода. Одно из полей используется для установки тегов. Всякий раз, когда пользователь нажимает клавишу ввода, я хочу добавить тег.

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

Это моя форма: 

      <form>

        <div className="tiny-margin-bottom medium-margin-top">
          <div className="tags__container">
            <InputField
              type="text"
              placeHolder="Add tags that are related to your business (for example 'Restaurant')"
              value={tagInput}
              onChange={setTagInput}
              onKeyPress={handleKeyPress}
              label="Hit 'Enter' to save tags"
            />
            <div className="tags__submit" onClick={addTag}>
              &rarr;
            </div>
          </div>

          <div className="tags">
            {values && values.tags ? renderTags(values.tags) : null}
          </div>
        </div>


        <div className="popup__button medium-margin-top">
          <button className="boxed-button " onClick={handleSubmit}>
            Create Project
          </button>
        </div>
      </form>

И это две мои функции:

Для когда ввод вводится в поле ввода: 

  const handleKeyPress = event => {
    event.stopPropagation();
    if (event.key === "Enter") {
      addTag();
      return false;
    }
  };

Для отправки формы: 

  const handleSubmit = event => {
    event.preventDefault();

    switch (true) {
      case !values.title:
        setFormError("Please give your project a title");
        break;

      case !values.country:
        setFormError("Please choose the country of your target audience");
        break;

      case !values.lang:
        setFormError("Please choose the language of your target audience");
        break;

      case values && values.tags && values.tags.length >= 3:
        setFormError("Please add at least 3 tags");
        break;

      default:
        setSubmitting(true);
        newProject(values, setSubmitting);
        setFormError(null);
        break;
    }
  };

1 Ответ

1 голос
/ 07 марта 2020

Для метки:
Добавить <form onSubmit={addLabelFunction} ... >. Так что теперь нажатие Enter вызовет эту функцию напрямую. Также добавьте 

<button 
  type="button" 
  ...
/>

Это гарантирует, что onSubmit не вызовет вашу функцию handleSubmit.

В идеале вы можете удалить event.stopPropogation(). Как правило, хорошая идея - позволить событию распространяться, если пользователь намеренно не хочет предотвратить его в некоторых случаях.

...