Для цели события формы веб-компонента LitElement установлено значение null - PullRequest
Новая
       55

Для цели события формы веб-компонента LitElement установлено значение null

0 голосов
/ 13 июля 2020

У меня есть обработчик событий для отправки формы, который отправляет данные в HTTP-запросе, а затем после получения ответа сбрасывает форму. Однако кажется, что свойство target объекта события изначально доступно, но быстро устанавливается на ноль. Приведенный ниже пример - это моя попытка свести проблему к минимуму (чтобы сделать ее воспроизводимой, я использовал setTimeout вместо HTTP-запроса). Он показывает, что хотя объект события изначально имеет элемент формы в качестве целевого свойства, после некоторого периода ожидания целевое свойство получает значение null. Это мешает мне сбросить форму после завершения HTTP-запроса. 

import { LitElement, css, html } from "lit-element";
import { render } from "lit-html";

class TestElement extends LitElement {
  submitForm(e) {
    e.preventDefault();
    console.log(e.target); // successfully logs <form> element
    window.setTimeout(() => {
      console.log(e); // logs event, with target now set to null
      e.target.reset(); // "Uncaught TypeError: Cannot read property 'reset' of null"
    }, 2000);
  }

  render() {
    return html`<form @submit=${this.submitForm}>
      <div class="form-controls">
        <label for="name">Name</label>
        <input type="text" id="name" name="name" />
        <label for="address">Address</label>
        <input type="text" id="address" name="address" />
        <button type="submit">submit</button>
      </div>
    </form>`;
  }
}
customElements.define("test-element", TestElement);
render(html`<test-element></test-element>`, window.document.body);

1 Ответ

0 голосов
/ 13 июля 2020

Проблема в том, что события веб-компонента «перенаправлены», что означает, что как только событие всплывает из веб-компонента в легкую DOM, целевое свойство событий обновляется и становится самим веб-компонентом.

Чтобы избежать В этой проблеме не используйте event.target, а вместо этого запрашивайте элемент напрямую, например, с помощью this.shadowRoot: 

class TestElement extends LitElement {
  submitForm(e) {
    e.preventDefault();
    const form = this.shadowRoot.querySelector("form");
    console.log(e.target, form); // successfully logs <form> element
    window.setTimeout(() => {
      console.log(form); // successfully logs <form> element
      form.reset(); // resets form
    }, 2000);
  }

  render() {
    return html`<form @submit=${this.submitForm}>
      <div class="form-controls">
        <label for="name">Name</label>
        <input type="text" id="name" name="name" />
        <label for="address">Address</label>
        <input type="text" id="address" name="address" />
        <button type="submit">submit</button>
      </div>
    </form>`;
  }
}
customElements.define("test-element", TestElement);
...