如果尺码和颜色是一个大数组里的两个小数组,数据是遍历渲染出来的,如何写两个同时高亮的状态
时间: 2024-03-22 07:38:12 浏览: 22
您可以为每个小数组添加一个状态属性(例如,selected)并设置其默认值为 false。然后,当用户选择其中一个选项时,您可以将该选项的 selected 值设置为 true。接下来,您可以使用 CSS 样式来在页面上突出显示所有已选择的选项。
例如,您可以为选中的选项添加一个特殊类(例如,"selected"),并使用 CSS 样式来更改该选项的样式,以使其在页面上更加醒目。以下是一个示例 CSS 样式:
```
.selected {
background-color: yellow;
font-weight: bold;
}
```
在您的渲染函数中,您可以使用条件渲染来根据每个选项的 selected 值来应用这个样式类。例如:
```
render() {
const { sizes, colors } = this.state;
return (
<div>
{sizes.map((size) => (
<div
key={size.id}
className={size.selected ? "selected" : ""}
onClick={() => this.handleSizeClick(size.id)}
>
{size.label}
</div>
))}
{colors.map((color) => (
<div
key={color.id}
className={color.selected ? "selected" : ""}
onClick={() => this.handleColorClick(color.id)}
>
{color.label}
</div>
))}
</div>
);
}
```
在此示例中,当选项被选择时,其 selected 值将被设置为 true,并且该选项的类名将被设置为 "selected"。当类名为 "selected" 时,该选项的样式将被更改以使其高亮显示。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)