Javascript 在React中将div的选择和状态管理为单选按钮选项

我希望找到React.js解决常见问题的方法

我有五个div，当单击时，它们将充当单选按钮选项

HTML可能如下所示：

//List of option DIVs which act as radio buttons when clicked
const options = () => (
  <div>
    <div>Option 1</div>
    <div>Option 2</div>
    <div>Option 3</div>
    <div>Option 4</div>
    <div>Option 5</div>
  </div>
);

// If an option DIV is selected, prepend this as the first child inside it
const isSelectedOverlay = () => (
    <div>Selected (overlay)</div>
);

我不明白的问题是：

单击选项DIV后，我需要通过在该元素覆盖DIV中添加一个子元素，将单击的元素设置为活动项。如何存储和管理哪个选项DIV是当前选定的元素

如何管理初始状态和onClick？我可以在元素本身上使用数据属性并获得它吗？还是使用选项ID调用onClick

如何删除所有其他选定选项并使其成为选定选项

我需要状态来存储当前选择的选项，但我不确定如何使用该状态来管理选择本身

我真的很感谢你的帮助。我一直在努力找出最好的方法

UI如下所示：

//List of option DIVs which act as radio buttons when clicked
const options = () => (
  <div>
    <div>Option 1</div>
    <div>Option 2</div>
    <div>Option 3</div>
    <div>Option 4</div>
    <div>Option 5</div>
  </div>
);

// If an option DIV is selected, prepend this as the first child inside it
const isSelectedOverlay = () => (
    <div>Selected (overlay)</div>
);

---

谢谢

Barney，您应该尝试将组件声明为类，以便可以对其进行状态管理。 有关如何使用状态的说明，请查看此文档

您的组件应该在该状态下有一个选项列表和一个所选选项的索引。遍历列表并对所选索引进行特殊处理。您可以让每个选项都是它自己的组件和标识它的索引，一个用于设置状态的onChange回调函数和一个isSelected属性。如果选择了道具，则可以将选定的覆盖html添加到道具中