如何保持按钮高亮显示（ReactJS）？

Question

我有7个<input type="button"/>用于在7个视图（不同的数据集）之间切换。现在，我要突出显示该按钮，单击该按钮，然后显示哪个视图。以下示例：

const [view,setView]=useState()

<input type="button" onClick={()=>{setView("view1")}} value="View1"/>
<input type="button" onClick={()=>{setView("view2")}} value="View2"/>
<input type="button" onClick={()=>{setView("view3")}} value="View3"/>
...

// for showing the corresponding view
{view==="view1"&& //show view1}
{view==="view2"&& //show view2}
...

我使用CSS中的:focus属性进行了此操作，但是当我单击其他位置时，焦点显然不再位于按钮上，而仍然显示视图。只要显示视图，是否有关于如何保持按钮高亮的建议？

Answer 1

您可能已经在状态中启用了ActiveView设置，或类似的设置。您的render方法（或组件函数）可以找出哪个视图处于活动状态，并将“活动” css类添加到正确的按钮。然后，您的CSS可以使用.active而不是使用：focus。 ：focus具有narrow and well defined scope。试图扩大使用范围可能只会导致难以阅读的代码和浏览器不兼容。

Answer 2

我很轻松地解决了。我向每个按钮添加了一个内联样式：

<input type="button" style={{backgroundColor:(view=="view1")?"purple":"grey"}} onClick={()=>{setView("view1")}} value="View1"/>
<input type="button" style={{backgroundColor:(view=="view2")?"purple":"grey"}} onClick={()=>{setView("view2")}} value="View2"/>
<input type="button" style={{backgroundColor:(view=="view3")?"purple":"grey"}} onClick={()=>{setView("view3")}} value="View3"/>