Javascript 使用鼠标悬停上的“删除”按钮创建反应列表

我正在创建一个下拉列表框，列表中的每个项目都有一个删除（X）按钮，用于从列表中删除该项目。当项目悬停在上方时，如何显示“仅”删除按钮

当前代码显示每个项目的清除按钮，但我只希望在项目悬停时显示

对不起，这是代码
从“React”导入React；
从“道具类型”导入道具类型；
从“样式化组件”导入样式化；
const ListWrapper=styled.div`
位置：绝对位置；
宽度：16雷姆；
z指数：1；
背景：白色；
&：悬停{
光标：指针；
} 
`;
const ListMenu=styled.div`
位置：绝对位置；
宽度：100%；
z指数：1；
背景：白色；
溢出x：隐藏；
`;
const ListMenuHeader=styled.div`
显示器：flex；
弯曲方向：行；
证明内容：柔性端；
`;
const DropdownText=Text.Link.extend`
垫面：3rem；
`;
const DropdownButton=styled.div`
填充：1雷姆0.75雷姆；
`;
const ListMenuItem=styled.div`
显示器：flex；
背景颜色：灰色）；
颜色：灰色}；
>[名称~=图标]{
右：0rem；
边界半径：0；
背景：无；
对齐项目：右对齐；
证明内容：正确；
&：悬停{
背景颜色：灰色）；
}
&：焦点{
大纲：无；
}
`;
类ListMenu扩展了React.Component{
静态类型={
id:PropTypes.string.isRequired，
text:PropTypes.node.isRequired，
项目：PropTypes.arrayOf（PropTypes.any）.需要，
组件：PropTypes.func.isRequired，
selectedItem:PropTypes.any，
getItemProps:PropTypes.func.isRequired，
highlightedIndex:PropTypes.number，
closeListMenu:PropTypes.func.isRequired，
};
静态defaultProps={
selectedItem:null，
highlightedIndex:null，
}
onClearClick=（项目，项目1）=>（项目）=>{
常量索引=items.indexOf（item1）；
如果（索引>-1）{
项目.拼接（索引，1）；
}
}
render（）{
常数{
id、文本、项目、组件、selectedItem、getItemProps、，
高亮显示索引，关闭列表菜单，
}=这是道具；
返回(
{text}
{selectedItems.map（（项目，索引）=>(
{React.createElement（组件，{item}）}
))}
);
}
}
导出默认列表菜单；

这里有一种方法可以让“x”出现在悬停状态

与其寻找一个“悬停”事件，不如寻找一个“onmouseenter”事件和“onmouseleave”组合

就像这样

class Example extends React.Component {

  onHover() {
    this.refs.deleteX.style.display = "block";
  }

  onExit() {
    this.refs.deleteX.style.display = "none";
  }

  render() {
    return (
      <div>
        <input onmouseenter={ this.onHover } onmouseleave={ this.onExit } />
        <p ref="deleteX">x</p>
      </div>
    )
  }
}

类示例扩展了React.Component{
onHover（）{
this.refs.deleteX.style.display=“block”；
}
onExit（）{
this.refs.deleteX.style.display=“无”；
}
render（）{
返回(
x
)
}
}

---

有点像

这里有一种方法可以让“x”出现在悬停状态

与其寻找一个“悬停”事件，不如寻找一个“onmouseenter”事件和“onmouseleave”组合

就像这样

class Example extends React.Component {

  onHover() {
    this.refs.deleteX.style.display = "block";
  }

  onExit() {
    this.refs.deleteX.style.display = "none";
  }

  render() {
    return (
      <div>
        <input onmouseenter={ this.onHover } onmouseleave={ this.onExit } />
        <p ref="deleteX">x</p>
      </div>
    )
  }
}

类示例扩展了React.Component{
onHover（）{
this.refs.deleteX.style.display=“block”；
}
onExit（）{
this.refs.deleteX.style.display=“无”；
}
render（）{
返回(
x
)
}
}

---

有点像

显示相关代码抱歉……添加了相关代码抱歉……添加了