2

我正在使用 Lit2.0、Material Web components、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);

有人可以引导我走向正确的方向。

4

2 回答 2

0

您可以value在 blur 上获取 textfield 元素并将其保存为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>
    `;
  }

表单.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>
于 2021-12-10T15:42:29.393 回答
0

其实这根本不是那么容易。您必须使用 ElementInternals：https ://developer.mozilla.org/en-US/docs/Web/API/ElementInternals

“Document_Object_Model 的 ElementInternals 接口为 Web 开发人员提供了一种允许自定义元素完全参与 HTML 表单的方法。”

这就是一个例子：

<script type="module">
import {
  LitElement,
  html,
  css
} from "https://unpkg.com/lit-element/lit-element.js?module";

class MyItem extends LitElement {

 static get formAssociated() {
    return true;
 }
  
 static get properties() {
    return {
      name: { type: String, reflect: true },
      required: { type: Boolean, reflect: true },
      value: { type: String }
    };
  }
  
  constructor() {
    super();
    this.internals = this.attachInternals();
    this.name = name;
    this.required = false;
    this.value = '';
    this._required = false;
  }
  
  render() {
    return html`
      <label for="input"><slot></slot></label>
      <input type="${this.type}" name="${this.name}" id="input" .value="${this.value}" ?required="${this.required}" @input="${this._onInput}">
    `;
  }
  
  _onInput(event) {
    this.value = event.target.value
    this.internals.setFormValue(this.value);
  }
  
  firstUpdated(...args) {
    super.firstUpdated(...args);
    /** This ensures our element always participates in the form */
    this.internals.setFormValue(this.value);
  }
}

customElements.define("my-item", MyItem);
const formElem = document.querySelector('#formElem');
formElem.addEventListener('submit', event => { 
  event.preventDefault(); 
  
  const form = event.target;

  /** Get all of the form data */
  const formData = new FormData(form);
  formData.forEach((value, key) => console.log(`${key}: ${value}`));
});

</script>
<form id="formElem">
  <my-item name="firstName">First name</my-item>
  <button type="submit">Submit</button>

</form>

于 2022-01-12T22:15:25.000 回答