如何 select 只有一个复选框而不是能够 select 多个？ （反应）

Question

我想只能 select 一个复选框，而不是全部或多个。 我想使用复选框而不是收音机，因为我可以禁用它而不必标记另一个收音机

     <C.SingleCard>
            <h2>Pizza</h2>
            <div>
                <hr />
                <h3>Flavors</h3>
                <hr />
            </div>
            <div>
                <h4>Pepperoni</h4>
                <input type="checkbox" name='flavor' />
            </div>
            <div>
                <h4>Chicken</h4>
                <input type="checkbox"  name='flavor' />
            </div>
            <div>
                <h4>Bacon</h4>
                <input type="checkbox"  name='flavor'  />
            </div>
            <div>
                <button>Add</button>
            </div>
        </C.SingleCard>

Answer 1

这是我能想到的最简单的方法：

将选项放在一个数组中，只跟踪选定的索引。 如果用户选择相同的索引，则将索引设置为 null。 使用map的index参数在选中的框上设置checked=true 。 onChange回调将在用户选择其中一个框时触发，您可以忽略事件参数，只传递框的索引。

const options = ['pepperoni', 'chicken', 'bacon'];

export default function App() {
  const [selected, setSelected] = useState(null);

  function onChange(i) {
    setSelected((prev) => (i === prev ? null : i));
  }

  function whatDidIPick() {
    console.log(options[selected] || 'nothing');
  }

  return (
    <div>
      {options.map((o, i) => (
        <label key={i}>
          {o}
          <input
            type="checkbox"
            checked={i === selected}
            onChange={() => onChange(i)}
          />
        </label>
      ))}
      <br />
      <button onClick={whatDidIPick}>Log what I picked</button>
    </div>
  );
}

https://stackblitz.com/edit/react-ts-1uwfcq?file=App.tsx