访问使用 Lit 创建的自定义组件的单个元素的属性

Question

我在 vaadin v23 中使用 lit 模板创建了一个自定义组件。 在这个自定义组件中，我创建了一个用于管理文件上传的表单。

特别是我必须执行以下两个操作：

1. 当事件以表单形式触发时，我必须读取字段的值（A）
2. 使用步骤 1 中读取的值，我必须在 js 脚本中计算另一个值 (B) 并更新另一个字段的 value 属性

如何访问我的自定义组件的字段以读取 (A) 和写入 (B)？ 使用 window.customelements.get("my-custom-component") 我只读取组件的文本代码。 使用 document.forms.MyForm.nome.value 我发现未定义。

谢谢您的建议

Answer 1

import { html, LitElement } from 'lit';

class MyCustomComponent extends LitElement {
static get properties() {
    return {
      pvalue: { type: String }
    }
  }
  render() {
return html`
 <form action='https://mybucket.s3.amazonaws.com/' method='post' enctype='multipart/form-data' onsubmit="" name="myForm">
        <input type='text'  name='key' value='${this.pvalue}' />
       <input type='file' id="file" ref="inputFile"  name='file' onChange="putS3Post(file,'XXXXXX'); } return (goOn)"/> <br />
        <input type='submit' name='submit' value='Upload object in Amazon S3 bucket' />
  </form>
    `;
  }
}
window.customElements.define('custom-component', MyCustomComponent);