Question

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

this.state = {
      action: [],
}

<div>
    {this.state.action.map((value, index) => {
    return (
    <div key={index} onMouseEnter={this.removeElementIcon} onMouseLeave={this.hideRemoveElementIcon} className={classes.gridClass}>
        <Grid className={classes.marginGrid}>
            <Paper className={classes.paddingPaper}>
                <Typography variant={"h5"}>{value}</Typography>
                <Typography component={"p"}>{value}</Typography>
            </Paper>
        </Grid>
        {this.state.removeElementIcon ?
        <IconButton className={classes.removeElement} color={"secondary"} arial-label={"remove element"} onClick={()=> this.removeElement(value)}>
            <ClearIcon color={"error"} />
        </IconButton>
        : null}
    </div>

我试图从方法本身返回一些jsx。

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

代替：

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

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

不仅仅是在一个元素上显示清除图标，它还显示在所有元素上。

Answer 1

您需要将项目index保持在状态，

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

将index传递给您的removeElementIcon函数，

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

   ...
</div>

在您的函数中设置hoverIndex，

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>
}

Demo（带有简单按钮）。

反应中所有元素上显示的清除图标

1 个答案: