使复选框列表表现为单选按钮答案

【问题标题】：To make list of checkbox behave as radio button使复选框列表表现为单选按钮
【发布时间】：2022-12-22 03:05:33
【问题描述】：

我在 useState 中创建了一个包含数据列表的复选框。现在我需要将复选框设置为单选按钮。我需要使用什么样的逻辑才能使复选框用作单选按钮

import { useState } from "react";

const Checkbox = () => {
    const [items, setItems] = useState([
        { id: 1, checked: false, item: "apple" },
        { id: 2, checked: false, item: "bananna" },
        { id: 3, checked: false, item: "cherry" },
        { id: 4, checked: false, item: "dragon fruit" }
      ]);
      const handleCheck = (id) => {
        const listItem = items.map((item) => item.id === id ? {...item, checked: !item.checked} : item)
        setItems(listItem)
      }
        

    return(
        <div>
            <ul>
               {
                items.map((item) => (
                    <li key={item.id}>
                        <input
                            type="checkbox"
                            checked = {item.checked}
                            onChange = {() =>handleCheck(item.id)}
                        />
                        <lable>{item.item}</lable>
                    </li>
                ))
               }
            </ul>
        </div>
    )
}
export default Checkbox;

【问题讨论】：

标签： reactjs

【解决方案1】：

只需将所有其他项目的 checked 属性设置为 false：

const handleCheck = (id) => {
        const listItem = items.map((item) =>
          item.id === id
            ? { ...item, checked: !item.checked }
            : { ...item, checked: false }
        );
        setItems(listItem);
      };

希望这可以帮助。

【讨论】：

【解决方案2】：

如果您想将其用作单选按钮逻辑，例如一次只选择一个复选框。

在为特定复选框设置 true 时，您还可以为其余复选框设置 false

  const handleCheck = (id) => {
    const listItem = 
    items.map((item) => 
    item.id === id ? {...item, checked: !item.checked} : {...item, checked: false} )
    setItems(listItem)
  }

【讨论】：