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

【问题标题】：radio button not showing the selected value in litelement component单选按钮未在 litelement 组件中显示所选值
【发布时间】：2019-03-28 06:28:01
【问题描述】：

我是 litelement 的新手，我有一个 lit-element 组件，其中渲染时的单选单击事件函数未定义。我想在渲染方法中显示选定的单选按钮值以及相应的提供程序 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 中显示单选按钮选择的值

【问题讨论】：

标签： javascript web-component lit-element lit-html

【解决方案1】：

您可能只需要将事件处理程序绑定到相关元素，并且您还需要将事件处理程序用引号括起来，就像任何其他 HTML 属性一样：

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

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

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

【讨论】：