如何将复选框的数量限制在一定数量的反应中？

Question

1. --这是复选框的代码，我想将选择限制在2。
2. --它将用于比萨应用程序，因此，在创建比萨饼.

的不同部分，限制号将有所不同。

const LagDinEgen = () => {
    return(
   <div>
        <form name="størrelse">
            <div className="desktop:w-3/4 tablet:w-11/12 w-full mx-auto grid grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3 rounded-lg overflow-hidden desktop:mt-8 gap-2">
                <div className="col-span-1 tablet:col-span-2 desktop:col-span-3 bg-mainBlue py-10 h-auto text-center text-white flex flex-col justify-center items-center">
            
                    <h1 class="mb-6 pt-6 mx-auto text-center"> VELG STØRRELSE</h1>
                    <div class="mx-auto max-w-sm text-center flex flex-wrap justify-center">

                        <div class="flex items-center mr-4 mb-4">
                            <input id="radio1" type="checkbox" name="radio" class="hidden"/>
                            <label for="radio1" class="flex items-center cursor-pointer px-3">
                            <span class="w-4 h-4 inline-block mr-1 border border-mainGreen rounded-full"></span>
                            SMALL</label> <label>129,-</label>
                        </div>

                        <div class="flex items-center mr-4 mb-4">
                            <input id="radio2" type="checkbox" name="radio" class="hidden" />
                            <label for="radio2" class="flex items-center cursor-pointer px-3">
                            <span class="w-4 h-4 inline-block mr-1 border border-mainGreen rounded-full"></span>
                            MEDIUM</label> <label>159,-</label>
                        </div>

                        <div class="flex items-center mr-4 mb-4">
                            <input id="radio3" type="checkbox" name="radio" class="hidden" />
                            <label for="radio3" class="flex items-center cursor-pointer px-3">
                            <span class="w-4 h-4 inline-block mr-1 border border-mainGreen rounded-full"></span>
                            LARGE</label> <label>189,-</label>
                        </div>
                    </div>
                </div>
            </div>
        </form>

Answer 1

假设您计划添加一个按钮，您可以利用该按钮上的本机HTML5 disabled属性，并维护当前选择的哪些项的状态以确定何时应禁用该按钮(例如。(selectedItems的数组)

您将把selectedItems.length > 2传递给禁用的属性，这样如果数组大于3时，它就会被禁用。

工作示例：https://codesandbox.io/s/xenodochial-currying-eb8kt?file=/src/Form.js

Answer 2

您应该将必要的数据作为支持传递给LagDinEgen组件，然后在JSX内部使用array.map()函数。这会是个不错的选择；

const LagDinEgen = ({title,options}) => {
    return(
   <div>
        <form name="størrelse">
            <div className="desktop:w-3/4 tablet:w-11/12 w-full mx-auto grid grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3 rounded-lg overflow-hidden desktop:mt-8 gap-2">
                <div className="col-span-1 tablet:col-span-2 desktop:col-span-3 bg-mainBlue py-10 h-auto text-center text-white flex flex-col justify-center items-center">
                    <h1 class="mb-6 pt-6 mx-auto text-center"> {title} </h1>
                    <div class="mx-auto max-w-sm text-center flex flex-wrap justify-center">
                        {
                            options.map((option,index)=>(
                                <div class="flex items-center mr-4 mb-4">
                                    <input type="checkbox" name="radio" class="hidden"/>
                                    <label class="flex items-center cursor-pointer px-3">
                                    <span class="w-4 h-4 inline-block mr-1 border border-mainGreen rounded-full"></span>
                                    {option.name}</label> <label>{option.price},-</label>
                                </div>
                            ))
                        }
                    </div>
                </div>
            </div>
        </form>