时间戳

首页 > 解决方案 > 反应包装组中元素的更改样式

javascript - 反应包装组中元素的更改样式

问题描述

我想更改组中元素的样式。我尝试使用 state/setState 但它会导致更改组中所有元素的样式。

{hasResults &&
            stockList.map((item, index) => (
              <div
                onClick={(x) => this.selectItem(item)}
                className={isClicked?"stockItem":"stockItemClicked"}
                key={index}
              >
                <img src={item.src.tiny} alt="" />
              </div>
            ))}

onClicked 函数是：

 selectItem = (x) => {
    if (window.innerWidth < 1200) {
      this.props.onClick(x);
    } else {
      x.className = "stockItemSelect";
      this.setState({
        isClicked: true,
      });
    }
    //
  };

如何仅更改一个元素的样式。谢谢 :D

标签： javascriptcssreactjs

解决方案

您可以创建一个状态变量clickedItem（最初为 null），然后单击任何项​​目将该项目设置clickedItem 为

this.setState({
        clickedItem: item,
      });

在应用类名render时map，您可以检查是否item===clickedItem 并应用相应的类名。

 {hasResults &&
                stockList.map((item, index) => (
                  <div
                    onClick={(x) => this.selectItem(item)}
                    className={item===state.clickedItem?"stockItemClicked":"stockItem"}
                    key={index}
                  >
                    <img src={item.src.tiny} alt="" />
                  </div>
                ))}

如果item是一个对象，请为每个对象分配一些唯一属性，例如 Id ，您可以检查item.Id===state.clickedItem.Id

推荐阅读