javascript - 如何使用 React powerplug 的悬停来添加和删除类？

Question

如果悬停，我想将“第一次”类添加到 bgFeatureImage 当鼠标离开/未悬停时，我想删除该类

import * as React from 'react';
import { Hover } from 'react-powerplug';

<Hover onChange={()=>{test : test2('first-time')}}>
     {({ hovered, bind }) => (
          <li>
            <a href="/"
               {...bind}>
                First time
            </a>
          </li>
   )}
</Hover>

export const test = link => {
 const bgFeatureImage = document.getElementById('bg-feature-image').classList.add(link) ;
 console.log('hover');
};
export const test2 = link => {
const bgFeatureImage = document.getElementById('bg-feature-image').classList.remove(link) ;
console.log('not hover');
};

我对 JavaScript 和 React 很陌生，不了解文档。您能否像我 5 岁一样解释为什么这不起作用以及如何使用它？

标签： javascriptreactjs

Answer 1

请检查此代码：

已处理悬停/悬停条件。您现在可以操作 hoverHandler

https://jpnj21l495.codesandbox.io/