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>