Выделите один элемент в списке в любой момент времени (по умолчанию индекс 0) - PullRequest
Новая
       5

Выделите один элемент в списке в любой момент времени (по умолчанию индекс 0)

0 голосов
/ 10 февраля 2020

Извините за ужасный заголовок, я не мог на всю жизнь понять, как сформулировать эту проблему. По умолчанию я хочу, чтобы первый элемент в моем списке был выделен, а остальные элементы были выделены, когда курсор мыши над ними. Это прекрасно работает, и мне было любопытно, как я могу удалить выделение этого начального элемента, когда другой выделен, я знаю, что мне нужно обработать состояние в моем родительском компоненте (List), но я не могу понять это.

Это мой элемент списка, который содержит некоторое базовое c управление состоянием, чтобы показать, выделен ли данный элемент или нет. 

export default function Item ({ title, onClick, selected, i }) {
  const [highlight, setHighlight] = useState(false)

  return (
    <ListItem
      i={i}
      key={title}
      selected={selected}
      onClick={onClick}
      onMouseEnter={() => setHighlight(true)}
      onMouseLeave={() => setHighlight(false)}
      // i === 0 && no other item is highlighted (need to get this state from the list component)
      highlight={highlight || i === 0}
    >
      {title}
    </ListItem>
  )
}

Родительский компонент, который принимает «список» и отображает каждый элемент в этот список к вышеуказанному компоненту (Item): 

export default function List ({ list, onClick, selected, render }) {s
  return (
    <div>
      {render ? (
        <ListContainer>
          {list.map((item, i) => (
            <Item
              i={i}
              key={item.title}
              title={item.title}
              onClick={() => onClick(item.title)}
              selected={selected(item.title)}
            />
          ))}
        </ListContainer>
      ) : null}
    </div>
  )
}

Вот ссылка Gyazo , которая показывает текущую реализацию, чего я хочу добиться, чтобы этот начальный элемент больше не был подсвечивается, когда мышкой введен другой элемент, индекс которого не равен 0.

Ответы [ 2 ]

0 голосов
/ 10 февраля 2020

Вам нужно поднять свое состояние выделения для родительского компонента List 

function List ({ list, onClick, selected, render }) {
  const [highlightIndex, setHighlightIndex] = setState(0);
  return (
    <div>
      {render ? (
        <ListContainer>
          {list.map((item, i) => (
            <Item
              i={i}
              key={item.title}
              title={item.title}
              onClick={() => onClick(item.title)}
              selected={selected(item.title)}
              highlightIndex={highlightIndex}
              setHighlightIndex={setHighlightIndex}
            />
          ))}
        </ListContainer>
      ) : null}
    </div>
  )
}

function Item ({ title, onClick, selected, i, highlightIndex, setHighlightIndex }) {
  return (
    <ListItem
      i={i}
      key={title}
      selected={selected}
      onClick={onClick}
      onMouseEnter={() => setHighlightIndex(i)}
      highlight={i === highlightIndex}
    >
      {title}
    </ListItem>
  )
}
0 голосов
/ 10 февраля 2020

Вы можете сделать это с помощью css

ul:not(:hover) li:first-of-type,
ul li:hover {
  background-color: red;
}

, первый из них будет выделен, когда не завис, а другой будет выделен при наведении и «отменит» первый.

Предполагается, что выбранный из них будет go в верхней части списка.

...