请使用react查看映射列表中的元素onHover

Question

我有一个列表，当用户悬停在项目上时，我希望出现一个x图标。当前，当用户将鼠标悬停在1个项目上时，x图标将显示在列表中的所有项目上。如何从列表中只识别一个元素？

组件

const [delWatchlist, setDelWatchlist] = useState(false);

<UncontrolledDropdown isOpen={dropdownOpen} toggle={toggle} className="watchlist-dropdown">
<DropdownToggle caret>
{selected}
</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={() => createForm()}>Create new list</DropdownItem>
<DropdownItem onClick={() => renameForm()}>Rename</DropdownItem>
<DropdownItem onClick={() => clearForm()}>Clear list</DropdownItem>
<DropdownItem divider />
{watchlists.map((value, index) => (
<DropdownItem value={index} key={value} onClick={() => updateSelected(index)} onMouseEnter={() => setDelWatchlist(true)} onMouseLeave={() => setDelWatchlist(false)}>
<span className="title-watchlists">
{value}
</span>
{delWatchlist && (
<i className="mdi mdi-close-box-outline icon-watchlists" />
)}
</DropdownItem>
))}
</DropdownMenu>
</UncontrolledDropdown>

Answer 1

在delWatchlist中使用标识符
如果value是唯一的，则可以使用它。index也起作用。

const [delWatchlist, setDelWatchlist] = useState(undefined);
// ...
{watchlists.map((value, index) => (
<DropdownItem
value={index}
key={value}
onClick={() => updateSelected(index)}
onMouseEnter={() => setDelWatchlist(index)}
onMouseLeave={() => setDelWatchlist(current => current === index ? undefined : current)}> // Make sure to only unset itself
<span className="title-watchlists">{value}</span>
{delWatchlist === index && (
<i className="mdi mdi-close-box-outline icon-watchlists" />
)}
</DropdownItem>
))}