Question

我是litelement的新手，我有一个light-element组件，其中的渲染单选按钮事件函数未定义。我想在render方法中显示所选的单选按钮值以及相应的提供者ID。

render() {
return html`
  ${this.provider.map(function (provider) {
      return html`
                       <div class="card">
                        <p>${provider.name}</p>
                          <div class="form-group">
                             <div class="form-check pb-2" @click=${this.handleSending}>
                            <input class="form-check-input" type="radio" name="sending" value="Bank Transfer">
                            <label>
                                  Bank Transfer
                            </label><br>
                            <input class="form-check-input" type="radio" name="sending" value="Credit Card">
                            <label>
                                  Credit Card
                             </label><br>
                           </div>
                         </div>
                       </div>`;
           })}
      `;
 }

import { LitElement, html, css } from 'https://unpkg.com/@polymer/lit-element/lit-element.js?module';
export class Provider extends LitElement {
   constructor(){
     super();
      this.provider=[
         {
           id="1", name="fund" ,description: "Raising Funds"
          },
         {
           id="2", name="transfer" ,description: "transfering money"
         }
     ];
    }
 handleSending(){
    var selected_sendoption = this.shadowRoot.querySelector('input[name = "sending"]:checked').value;
  }
  render() {
return html`
  ${this.provider.map(function (provider) {
      return html`
                       <div class="card">
                        <p>${provider.name}</p>
                          <div class="form-group">
                             <div class="form-check pb-2" @click=${this.handleSending}>
                            <input class="form-check-input" type="radio" name="sending" value="Bank Transfer">
                            <label>
                                  Bank Transfer
                            </label><br>
                            <input class="form-check-input" type="radio" name="sending" value="Credit Card">
                            <label>
                                  Credit Card
                             </label><br>
                           </div>
                         </div>
                       </div>`;
           })}
      `;
 }
}

预期结果，在渲染html中显示单选按钮选择的值

Answer 1

您可能只需要将事件处理程序绑定到所讨论的元素，并且还需要将事件处理程序像其他HTML属性一样用引号引起来：

<div class="form-check pb-2" @click="${this.handleSending.bind(this)}">

您可能还想删除选择器中的空格-选择器可能会起作用，但是我个人从未见过像这样的选择器中有空格。

edit：问题还可能在于您嵌套了函数调用，因此this的值可能与您期望的不同。您可以在渲染方法的顶部添加以下行：const context = this;，然后在模板的其余部分中将对this的所有引用替换为context。

单选按钮未在litelement组件中显示所选值

1 个答案: