javascript - 创建带有悬停按钮的 React 列表

Question

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

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

Sorry, here is the code


  import React from 'react';
   import PropTypes from 'prop-types';
   import styled from 'styled-components';

    const ListWrapper = styled.div`
  position: absolute;
  width: 16rem;
  z-index: 1;
  background: white;

  &:hover {
    cursor: pointer;
  } 

`;

const ListMenu = styled.div`
position: absolute;
width: 100%;
z-index: 1;
background: white;
overflow-x: hidden;
`;

const ListMenuHeader = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
`;

const DropdownText = Text.Link.extend`
  padding-top: 3rem;
`;

const DropdownButton = styled.div`
  padding:  1 rem 0.75rem;
`;

const ListMenuItem = styled.div`
  display: flex;
  background-color: grey)};
  color: grey}; 

  >[name~=icon] {
    right: 0rem;  
    border-radius: 0;
    background: none;  
    align-items: right;
    justify-content: right;  

  &:hover {
    background-color: grey)};
  }
  &:focus {
    outline: none;
  }
`;

class ListListMenu extends React.Component {
  static propTypes = {
    id: PropTypes.string.isRequired,
    text: PropTypes.node.isRequired,
    items: PropTypes.arrayOf(PropTypes.any).isRequired,
    component: PropTypes.func.isRequired,  
    selectedItem: PropTypes.any,
    getItemProps: PropTypes.func.isRequired,
    highlightedIndex: PropTypes.number,
    closeListMenu: PropTypes.func.isRequired,
  };

  static defaultProps = {
    selectedItem: null,
    highlightedIndex: null,
  }


  onClearClick = (items,item1) => (item) => {

    const index = items.indexOf(item1);
    if (index > -1) {
        items.splice(index, 1);
   }
  }

  render() {
    const {
      id, text, items, component,  selectedItem, getItemProps,
      highlightedIndex, closeListMenu,
    } = this.props; 


    return (
      <ListWrapper id={id} >
        <ListMenuHeader onClick={closeListMenu}>
          <DropdownText>{text}</DropdownText>
          <DropdownButton
            id={`${id}-button`}
          >
            <Icon type="caret-up" appearance="neutral" />
          </DropdownButton>
        </ListMenuHeader>
        <ListMenu>
          {selectedItems.map((item, index) => (
            <ListMenuItem
              {...getItemProps({
                item,
                isActive: highlightedIndex === index,
                isSelected: _.isEqual(selectedItem, item),
              })}
              key={index} 
            >
              {React.createElement(component, { item })}


              <Button   // CLEAR BUTTON
          name={item}
          id={item}
          icon="remove"
          onClick={this.onClearClick(items, item)}
          circle
          display="flat"
          appearance="disabled"
          id="clear-search-button"          
        />

            </ListMenuItem>
          ))}


        </ListMenu>
      </ListWrapper>
    );
  }
}

export default ListListMenu;

Answer 1

这是一种方法，您可以让“x”出现在悬停时。

与其寻找“hover”事件，不如寻找与“onmouseleave”组合的“onmouseenter”事件？

就像这样...

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

有点像this post