带有自定义按钮的无线电输入表单

Question

我想实现无线电输入的行为，但使用自定义按钮（而不是那些圆形复选框）。

最后，行为应该是相同的（只需选择 1），并且单击时它应该保留其状态（在图像中选择了option1 ）。

我正在使用 React，但我有任何其他建议可能会有所帮助

Answer 1

也许 aradio并不是最适合您需要的。您应该创建一个带有selectedTab属性的组件，该属性可以更改样式 a div（例如）以赋予其红色，并检查使用该属性选择了哪个选项卡。例如// ...<div className={selectedTab === 1 ? "red" : "gray"} onClick={() => setSelectedTab(1)} /><div className={selectedTab === 2 ? "red" : "gray"} onClick={() => setSelectedTab(2)} />// ...