在Lit-Element中如何处理点击事件并动态向ul追加li元素？

现有代码问题点 #

• 事件名不匹配：按钮点击事件绑定的是_addList，实际定义的函数名为addList，二者不一致导致点击无触发
• 无响应式状态声明：listItems未被标记为组件响应式属性，修改后不会触发视图更新
• 未渲染列表数据：render函数中的ul标签为空，没有将listItems数组内容渲染为li元素
• this指向异常：普通函数定义的addList作为事件回调时，this不指向组件实例，无法读取this.listItems等属性

修正后完整代码（基于Lit框架） #

import { LitElement, html } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
import { styleMap } from 'lit/directives/style-map.js';

class ListComponent extends LitElement {
  // 声明响应式状态（无装饰器写法）
  static properties = {
    name: { state: true },
    listItems: { state: true },
    classes: { state: true },
    styles: { state: true }
  }

  constructor() {
    super();
    this.name = '';
    this.listItems = [];
    // 可自行补充classes、styles的默认值
    this.classes = {};
    this.styles = {};
  }

  getNewVal(e) {
    this.name = e.target.value;
  }

  // 箭头函数保证this指向组件实例，函数名与绑定的事件名一致
  _addList = () => {
    // 非空判断避免添加空内容
    if (!this.name.trim()) return;
    // 变更响应式数组触发重渲染
    this.listItems = [...this.listItems, this.name.trim()];
    // 可选：添加完成后清空输入框
    this.name = '';
  }

  render() {
    return html`
      <input oninput="${this.getNewVal}" id="name" type="text" value="${this.name}">
      <button onclick="${this._addList}" type="button">Add</button>
      <p class=${classMap(this.classes)} style=${styleMap(this.styles)}>Hello, ${this.name}!</p>
      <ul>
        <!-- 遍历响应式数组生成li元素 -->
        ${this.listItems.map(item => html`<li>${item}</li>`)}
      </ul>
    `;
  }
}

customElements.define('list-component', ListComponent);

内容的提问来源于stack exchange，提问作者Hiten B