如何基于React JS中的过滤数据动态更改CSS /突出显示按钮元素？

Question

我有一个由大量按钮（超过300个）组成的UI，这些按钮根据CSS样式表进行样式设置。

我将如何根据传递的数据突出显示其中一些按钮。

例如，这是我的一些按钮。它们都具有分配给它们的唯一值，该值使用户在单击时可以拉出更多信息（因此为onClick）。

<div className="btn">
   <button type = "button" name = "channelID" value = 'A01' onClick = {this.onClick}>A01</button>
   <button type = "button" name = "channelID" value = 'A02' onClick = {this.onClick}>A02</button>
   <button type = "button" name = "channelID" value = 'A03' onClick = {this.onClick}>A03</button>
   <button type = "button" name = "channelID" value = 'A04' onClick = {this.onClick}>A04</button>
   <button type = "button" name = "channelID" value = 'A05' onClick = {this.onClick}>A05</button>
</div>

默认情况下，假设CSS样式表对按钮的样式设置如下：

.btn button = {
   background-color: black;
   color: white
}

我还有一个选择标签，该标签应允许用户选择频道的特定属性：

<select name="datatype" onChange={this.handleChange}>
   <option>--- Data Type ---</option>
   <option value="inspected">View Inspected Channels</option>
   <option value="requiresReplacement">View Channels to Replace</option>
</select>

假设有人从此下拉菜单中选择“已检查”。它将仅从主数据中过滤并返回已检查属性设置为true的通道。看起来像这样，只检查了通道A02，A03和A05：

state = { 
   channelsToHighlight = [
      { 
         channelID: "A02",
         inspected: true
      }, 
      { 
         channelID: "A03",
         inspected: true
      }, 
      { 
         channelID: "A05",
         inspected: true
      }, 
   ]
}

（（如果用户选择了“查看要替换的频道”选项，它将拉出不同的频道子集。）

我现在希望通道A02，A03和A05具有不同的背景颜色，以便它们突出显示。

我已经考虑过将getStyle（）选项添加到我的组件中，该选项可以有条件地呈现，但是我不确定如何做到这一点。是否可以将channelToHighlight对象中的channelID属性与我为每个按钮设置的值进行匹配？

任何帮助或建议将不胜感激！

Answer 1

<button style={{ backgroundColor: state.channelsToHighlight.inspected ? 'black' : 'white' }}></button>

或者您可以根据状态切换CSS类：

<button className={state.channelsToHighlight.inspected ? 'selected' : 'unselected'}></button>

如果您手动键入所有按钮，除非有充分的理由，也许您应该考虑遍历数组并使用JSX中的map函数进行渲染。

希望这会有所帮助。祝你好运！

Answer 2

.selected-button = {
   background-color: yellow;
   color: black
}

然后在渲染器中进入状态（假设状态在相同的组件中，否则进入道具）以获取此按钮的当前inspected值，如果被检查为true，则将selected-button类添加到特定按钮。

<div className="btn">
   <button className={this.state.channelsToHighlight.find(c => c.channelID == "A01")?.inspected ? "selected-button" : ""} type = "button" name = "channelID" value = 'A01' onClick = {this.onClick}>A01</button>
   <button className={this.state.channelsToHighlight.find(c => c.channelID == "A02")?.inspected ? "selected-button" : ""} type = "button" name = "channelID" value = 'A02' onClick = {this.onClick}>A02</button>
   <button className={this.state.channelsToHighlight.find(c => c.channelID == "A03")?.inspected ? "selected-button" : ""} type = "button" name = "channelID" value = 'A03' onClick = {this.onClick}>A03</button>
   <button className={this.state.channelsToHighlight.find(c => c.channelID == "A04")?.inspected ? "selected-button" : ""} type = "button" name = "channelID" value = 'A04' onClick = {this.onClick}>A04</button>
   <button className={this.state.channelsToHighlight.find(c => c.channelID == "A05")?.inspected ? "selected-button" : ""} type = "button" name = "channelID" value = 'A05' onClick = {this.onClick}>A05</button>
</div>

注意：您的按钮生成遵循每个按钮的相同模式，只是值和文本改变。您可以使用地图功能清理此内容。目前尚不清楚这仅仅是示例还是项目中的代码，但这是如何使用发布的代码进行示例的示例。由于删除了find调用，因此这也将大大提高性能，并且如果您有很多按钮，则查找会很慢。使用地图可以解决此问题。

首先将状态重构为每个按钮都有一个条目。
state = { 
   channels = [
      { 
         channelID: "A01",
         inspected: false
      }, 
      { 
         channelID: "A02",
         inspected: true
      }, 
      { 
         channelID: "A03",
         inspected: true
      }, 
      { 
         channelID: "A04",
         inspected: false
      }, 
      { 
         channelID: "A05",
         inspected: true
      }, 
   ]
}

然后将渲染器更改为使用地图

<div className="btn">
  { 
      this.state.channels.map(ch => <button className={ch.inspected ? "selected-button" : ""} type = "button" name = "channelID" value = {ch.channelID} onClick = {this.onClick}>{ch.channelID}</button>)
  }
</div>