javascript - 如何避免呈现复选框编号？

问题描述

我正在尝试根据表单中的复选框创建一个以逗号分隔的饮食限制列表。我设法制作了一个以逗号分隔的列表，但是当我单击复选框时，我找不到阻止应用程序呈现数字的方法。请看下面：

class App extends Component {
    constructor() {
        super()
        this.state = {
            firstName: "",
            lastName: "",
            age: "",
            gender: "",
            destination: "",
            dietaryRestrictions: {
                isVegan: false,
                isKosher: false,
                isLactoseFree: false
            }
        }
        this.handleChange = this.handleChange.bind(this)
    }

{...更多代码..}

render() {
        const dietR = []
        return (
            <main>

{...更多代码..}

[Your dietary restrictions: 
                    {this.state.dietaryRestrictions.isKosher ? dietR.push("Kosher"):null}
                    {this.state.dietaryRestrictions.isLactoseFree ? dietR.push("Lactose-Free"):null}
                    {this.state.dietaryRestrictions.isVegan ? dietR.push("Vegan"):null}
                <p>{dietR.join(", ")}</p>
            </main>
        )

注意截图中“dietaryRestrictions”后面的“123”

标签： javascriptreactjscheckbox

问题在于您的渲染方式：

{this.state.dietaryRestrictions.isLactoseFree ? dietR.push("Lactose-Free"):null}

dietR.push("Lactose-Free")，例如，将返回数组的长度。所以你可以在这里看到，因为你推一个项目，你得到长度 1，然后你推另一个，所以现在你有长度 2，然后另一个，所以你得到长度 3，这就是你得到的原因123。因此，我不会在渲染中更改数组的地方执行业务逻辑，而是在渲染之外创建一个方法来执行此操作。

你可以说：

const getDietaryRestrictions = () => {
    const dietR = []   
    if(this.state.isKosher)
        dietR.push("Kosher");
    if(this.state.isLactoseFree)
        dietR.push("Lactose-Free");
    if(this.state.isVegan)
        dietR.push("Vegan");
    return dietR;
}

然后你可以有

<p>{this.getDietaryRestrictions().join(", ")}</p>

javascript - 如何避免呈现复选框编号？

问题描述

解决方案

推荐阅读