Lit2.0如何提交表单数据到后端答案

【问题标题】：Lit2.0 how to submit form data to backendLit2.0如何提交表单数据到后端
【发布时间】：2022-01-09 16:16:31
【问题描述】：

我正在使用 Lit2.0、Material Web 组件、Django（后端）。

一个参考：https://www.thinktecture.com/en/web-components/flaws/

我不明白如何将表单数据从 Lit 组件提交到后端 (Django)

form.html 包含 Lit 组件（基本形式）

<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 Web 组件

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);

谁能指引我正确的方向。

【问题讨论】：

标签： django web-component material-components-web lit

【解决方案1】：

您可以将 textfield 元素的 value 设置为 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>

【讨论】：