在React中将DIV的选择和状态作为单选按钮选项进行管理

Question

我希望找到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>
);

我不明白的问题：

1. onClick选项DIV，我需要通过在该元素中添加一个子元素（overlay div）来将clicked元素设置为活动项目。如何存储和管理哪个选项div是当前选定的元素？

2. 如何最初管理状态和onClick？我可以在元素本身上使用data-attr并获得它吗？或者我使用选项ID调用onClick吗？

   1. 如何删除所有其他选定的选项并将其设为选定的选项？

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

我真的非常感谢这方面的帮助。我试图找出最好的方法来解决这个问题。

用户界面如下所示：



谢谢！

Answer 1

Barney，你应该尝试将你的组件声明为一个类，这样你就可以用它来进行状态管理。 有关如何使用状态https://facebook.github.io/react-vr/docs/components-props-and-state.html

的说明，请查看此文档

您的组件应该在状态中包含选项列表和选择了哪个选项的索引。遍历列表并对所选索引进行特殊处理。你可以让每个选项都是它自己的组件和标识它的索引，一个用于设置状态的onChange回调函数和一个isSelected prop。如果选择道具，您可以添加＆＃34;选择的叠加层＆＃34; html到它。