在 LitElement 属性和 DOM 属性之间同步复选框状态时出现问题

Question

问题描述：

我正在使用 LitElement 创建一个受控复选框组件。我在将 DOM 中复选框的选中属性与 LitElement 组件的选中属性同步时遇到问题。

示例代码：

import { LitElement, html, css } from 'lit';

class ControlledCheckbox extends LitElement {
  static properties = {
    checked: { type: Boolean },
  };

  static styles = css`
    :host {
      display: block;
    }
  `;

  constructor() {
    super();
    this.checked = false;
    this.count = 0;
  }

  render() {
    return html`
      <div>${this.count}</div>
      <input
        type="checkbox"
        .checked="${this.checked}"
        @change="${this._handleChange}"
      />
    `;
  }

  _handleChange(event) {
    if (this.count > 5 && this.checked) {
      return;
    }
    this.count += 1;
    this.checked = event.target.checked;
  }
}

customElements.define('controlled-checkbox', ControlledCheckbox);

问题：

我遇到的问题是，尽管实现了更改事件处理来更新 LitElement 组件的 checked 属性，但 DOM 中元素的 checked 属性并未正确更新。因此，复选框的视觉状态并不总是反映组件的内部状态。 具体来说，我希望在计数超过 5 并且该复选框已被选中后，该复选框仍保持选中状态（视觉上）。

我尝试过的：

-我已验证更改事件处理是否正常工作，并且组件的检查属性是否正确更新。

-我已经检查了 LitElement 文档，以了解我在处理属性和属性时是否做错了什么。

问题：

任何人都可以帮助我理解如何正确地将 DOM 中复选框的选中属性与 LitElement 组件的选中属性同步，以便其视觉状态始终反映内部组件状态？预先感谢您的任何建议或解决方案！

Answer 1

我假设您希望视觉复选框保持填充状态，而不是

checked

元素上的

<input>

属性，该属性仅用于指示默认状态。

用户单击复选框会翻转元素的内部

checked

属性。要覆盖此行为并保持其选中状态，您需要立即发生 Lit 更新周期并使

.checked

属性绑定保持 true。这通常是通过设置反应性属性的值来完成的，但在您的

_handleChange()

中，您提前返回而没有设置任何内容，因此 Lit 不会发生更新。您可以通过手动调用

this.requestUpdate()

来解决此问题。

  _handleChange(event) {
    if (this.count > 5 && this.checked) {
      this.requestUpdate();
      return;
    }
    this.count += 1;
    this.checked = event.target.checked;
  }

除此之外，Lit 的更新通常会通过与最后提交的值进行比较来检查是否需要更新绑定，而不是 DOM 的当前值。由于复选框在 DOM 中改变了它自己的状态，Lit 不会知道这一点。为了确保 Lit 检查实时 DOM 值而不是最后提交的值，请使用 live() 指令

。

import {live} from 'lit/directives/live.js';

  render() {
    return html`
      <div>${this.count}</div>
      <input
        type="checkbox"
        .checked="${live(this.checked)}"
        @change="${this._handleChange}"
      />
    `;
  }