Lit2.0 как отправить данные формы в бэкенд

Использую Lit2.0, компоненты Material Web, Django (бэкенд).

одна ссылка: https://www.thinktecture.com/en/web-components/flaws/

Я не понимаю, как отправить данные формы из компонента Lit в бэкенд (Django)

form.html содержит компонент Lit (basic-form)

<form id="id_demo" method="post" action="">
    {%  csrf_token %}

    <basic-form></basic-form>

    <button type="submit" class="mdc-button mdc-button--raised">Submit</button>
</form>

basic-form является компонентом Lit и содержит веб-компоненты Material

import {LitElement, html} from "lit";

// const template = document.createElement('template');
// template.innerHTML = `
//   <slot></slot>
// `;

export class BasicForm extends LitElement {

  static properties = {
    form: '',
  };

  constructor() {
    super();
    // this.shadow = this.attachShadow({ mode: 'open' });
    // this.shadow.appendChild(template.content.cloneNode(true));
  }

  
  render() {
    return html`
      <mwc-textfield name="first_name"></mwc-textfield>
    `;
  }
}
customElements.define('basic-form', BasicForm);

Мог бы кто-нибудь направить меня в правильном направлении.

Вы можете взять свойство value элемента textfield на blur и сохранить его как свойство basic-form. Затем при отправке формы вы можете взять свойство basic-form.value:

базовая форма

export class BasicForm extends LitElement {
  static properties = {
    value: ''
  }
  onBlur() {
    this.value = e.target.value;
  }
  render() {
    return html`
      <mwc-textfield name="first_name" @onBlur="${this.onBlur}></mwc-textfield>
    `;
  }

form.html

<form id="id_demo" method="post" action="">
    {%  csrf_token %}

    <basic-form></basic-form>

    <button type="submit" class="mdc-button mdc-button--raised">Submit</button>
</form>
<script>
  const form = document.getElementById("id_demo");
  const basicForm = form.querySelector('basic-form');
  const onSubmit = (event) => {
    console.log(basicForm.value);
  }
  form.addEventListener('submit', onSubmit);
</script>
Вернуться на верх