0

因此，我正在映射一组对象，并希望在选择单选按钮时显示在页面上。例如，如果数组中有两个对象，则将有两个单选按钮。如果你按下radio1，它应该呈现form1。如果按radio2，它应该隐藏form1并显示form2。

我创建了一个名为 formIndex 的属性来跟踪正在按下哪个按钮，以便我知道要调用哪个表单，但我在实现时遇到了麻烦。

当前行为：在页面加载时，两个无线电都出现，但尚未呈现数据。当我按下radio1 时，它同时显示form1 和form2。当我按下radio2 时，它同时显示form1 和form2。

我在 TypeScript 文件中使用 LitElement。

这是我创建的属性。由于我通过从 0 开始的数组进行映射，因此我将此属性初始化为 -1：

@state()
formIndex: number = -1;

这是我渲染表格的地方：

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

最后，这是处理收音机点击的方法：

protected handleClick(e: any){
        if(e.target.id == this._data.forms[0].label){
            this.formIndex = 0
        } else if(e.target.id == this._data.forms[1].label) {
            this.formIndex = 1
        }
        console.log(this.formIndex);
    }

如何使它在单击第一个单选时仅显示第一个表单而单击第二个单选时仅显示第二个表单的位置？谢谢！

4

1 回答 1

1

我只会使用lit.dev 文档中描述的条件渲染

一个最小的示例如下所示：

@customElement('test-cond-render')
export class CondRender extends LitElement {
    
    @state()
    selectedForm = -1;

    formData = [
        {id: 0, title: 'form one'},
        {id: 1, title: 'form two'}
    ];


    renderForm() {
        if(this.selectedForm === -1) {
            return html`
                <span>Please select a form</span>
            `;
        } else if (this.selectedForm === 0) {
            return html`
                <form action="#" target="_blank">
                    <p>
                        Select your interests:<br>
                        <input type="checkbox" name="movies"> Movies<br>
                        <input type="checkbox" name="sports"> Sports<br>
                        <input type="checkbox" name="videogames"> Videogames
                    </p>
                    <input type="submit" value="Send data">
                </form>
            `;

        } else if (this.selectedForm === 1) {
            return html`
                <form action="#" target="_blank">
                <p>
                    Enter your full name: <input type="text" name="fullname">
                    <input type="submit" value="Send data">
                </p>
                </form>
            `;

        } else {
            return html`
                <span>Something went wrong..</span>
            `;
        }
    }
    handleClick(form_id:number) {
        console.log('handle click:', form_id);
        this.selectedForm = form_id;
    }
    render() {
        return html `
            <h2>Cond render</h2>
            ${this.formData.map((data) => 
                html`
                    <input type="radio" name="form-group" value="${data.id}" id="${data.id}" @click="${this.handleClick.bind(this, data.id)}">
                    <label for="${data.id}">${data.title}</label>
                `
            )}
            
            <div>${this.renderForm()}</div>
        `;
    }
}

您的表格可能更复杂，但原理应该相同。

您还可以使用缓存指令进行渲染，这样它就不会在每次切换时为所选表单重新创建 DOM。

<div>${cache(this.renderForm())}</div>
于 2021-11-05T12:49:45.657 回答