如何在TypeScript中实现LitElement单选按钮控制表单的条件渲染

问题根源 #

你在遍历表单配置数组的每一轮循环中，仅判断formIndex > -1就渲染当前循环对应的表单，所以只要选中任意单选按钮，formIndex变为0或1后，所有循环项的判断条件都会触发，自然会同时渲染全部表单。

修改方案 #

1. 调整渲染逻辑 #

遍历表单数组时取当前项的索引，仅当formIndex和当前索引完全相等时才渲染对应表单，同时给单选按钮增加索引标识方便事件处理，还可以绑定checked属性让单选选中状态和数据同步：

protected renderMultipleForms(formConfig: any): TemplateResult {
        return html`
            ${formConfig?.formHeading ? html`<h3>${formConfig.formHeading}</h3>` : ''}
                ${formConfig.forms?.map((data: any, index: number) => html`
                    <!-- RADIOS  -->
                    <input 
                        type="radio" 
                        id=${data.label} 
                        name="paymentRadios" 
                        data-index=${index}
                        ?checked=${this.formIndex === index}
                        @click="${this.handleClick}"
                    >${data.label} <br />
                    <!-- RENDERING FORMS  -->
                    <p>${this.formIndex === index ? this.renderForm(data.form, data.paymentIcons) : ''}</p>
                `)}
        `;
}

2. 优化点击事件处理 #

不用硬编码判断是第0个还是第1个表单，直接读取单选按钮绑定的索引赋值即可，适配任意数量的表单配置：

protected handleClick(e: any){
    this.formIndex = Number(e.target.dataset.index);
    console.log(this.formIndex);
}

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