你如何在react中渲染一个传播对象符号状态

问题描述

研究以下反应代码：我需要在段落文本中显示用户选择的列表。事件处理程序对我来说似乎很好，只是无法弄清楚在对象上呈现什么

您的饮食限制： //一些代码应该在这里

如果用户选择多个选项，则显示应为单独的列表。

import React,{Component} from "react";

class App extends Component {
    // manage state
    constructor() {
        super();
        this.state = {
            dietaryRestrictions: {
                isvegan: false,isKosher: false,isLactoseFree: false
            }
        }
        this.handleOnchange = this.handleOnchange.bind(this);
    }

    // custom functions
    handleOnchange(event) {
        const {name,value,type,checked} = event.target
        type === "checkBox" ? this.setState(prevstate => {
            return {
                dietaryRestrictions: {
                    ...prevstate.dietaryRestrictions,[name]: checked
                }
            }
        }) : this.setState({
            [name]: value
        })
    }

    render() {
        return(
            <main>
                <form>
                    <label>
                        <input
                            type="checkBox"
                            name="isvegan"
                            onChange={this.handleOnchange}
                            checked={this.state.dietaryRestrictions.isvegan}
                        /> Vegan?
                    </label><br />

                    <label>
                        <input
                            type="checkBox"
                            name="isKosher"
                            onChange={this.handleOnchange}
                            checked={this.state.dietaryRestrictions.isKosher}
                        /> Kosher?
                    </label><br />

                    <label>
                        <input
                            type="checkBox"
                            name="isLactoseFree"
                            onChange={this.handleOnchange}
                            checked={this.state.dietaryRestrictions.isLactoseFree}
                        /> Lactose Free?
                    </label><br />
                </form>

                <p>
                    Your dietary restrictions:
                    {/* What should i write here to display the selection(s) as a list?? */}
                </p>
            </main>
        )
    }
}

export default App;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）