Javascript 清除显示在react中所有元素上的图标

我试图在用户鼠标悬停的网格显示器上显示删除图标

this.state = {
      action: [],
}

---

不是只在一个元素上显示清除图标，而是在所有元素上显示清除图标。

您需要将项目

索引保持在状态

this.state = {
   action: [],
   hoverIndex: '',
}

将
索引
传递给您的
removelementicon
函数

<div 
   key={index} 
   onMouseEnter={() => this.removeElementIcon(index)}
   onMouseLeave={hideRemoveElementIcon} 
   className={classes.gridClass}
>

   ...
</div>

最后应用这个条件,

{this.state.removeElementIcon && this.state.hoverIndex === index ?
    <IconButton className={classes.removeElement} color={"secondary"} arial-label={"remove element"} onClick={() => this.removeElement(value)}>
        <ClearIcon color={"error"}/>
    </IconButton>
    : null
}

{this.state.removelementicon&&this.state.hoverIndex===index？
this.removeElement（值）}>
：null
}

甚至是很短的路

{this.state.removeElementIcon && this.state.hoverIndex === index &&
    <IconButton className={classes.removeElement} color={"secondary"} arial-label={"remove element"} onClick={() => this.removeElement(value)}>
        <ClearIcon color={"error"}/>
    </IconButton>
}

{this.state.removelementicon&&this.state.hoverIndex==index&&
this.removeElement（值）}>
}

使用简单的按钮。
嗨，Ezrab，检查我的解决方案，如果有帮助，请告诉我。
<div 
   key={index} 
   onMouseEnter={() => this.removeElementIcon(index)}
   onMouseLeave={hideRemoveElementIcon} 
   className={classes.gridClass}
>

   ...
</div>

removeElementIcon = (index) => {
    this.setState({removeElementIcon: true, hoverIndex: index});
};


hideRemoveElementIcon = () => {
    this.setState({removeElementIcon: false, hoverIndex:''});
};

{this.state.removeElementIcon && this.state.hoverIndex === index ?
    <IconButton className={classes.removeElement} color={"secondary"} arial-label={"remove element"} onClick={() => this.removeElement(value)}>
        <ClearIcon color={"error"}/>
    </IconButton>
    : null
}

{this.state.removeElementIcon && this.state.hoverIndex === index &&
    <IconButton className={classes.removeElement} color={"secondary"} arial-label={"remove element"} onClick={() => this.removeElement(value)}>
        <ClearIcon color={"error"}/>
    </IconButton>
}