我无法在 React 上使用鼠标事件来更改 background-color

Question

当我在 body 上输入鼠标时，我想用 React

更改页面的 background-color

我该怎么办？

Answer 1

我写了简单的功能组件来展示这个想法。 react onMouseEnter 中有一个方法，如果鼠标进入元素然后使用该状态更改背景，您可以使用该方法设置状态。如果鼠标进入，我在元素上添加一个 class ，如果鼠标离开元素，你也可以使用 onMouseLeave 方法删除背景。您可以在组件的根目录中使用此想法来更改整个背景屏幕。

import React from 'react';
import { useState } from 'react';

// Styles
import '../src/styles/style.scss';

const BgChangeMouseEvent = () => {
  const [isEnterMouse, setIsEnterMouse] = useState(false);

  const handleBackground = state => {
    setIsEnterMouse(state);
  };

  return (
    <div
      className={isEnterMouse ? 'background' : ''}
      onMouseEnter={() => handleBackground(true)}
      onMouseLeave={() => handleBackground(false)}
    >
      <h1>Changing background from mouse Enter</h1>
    </div>
  );
};

export default BgChangeMouseEvent;

有关更多信息，请阅读官方 React 网站上的 link。 https://reactjs.org/docs/events.html#mouse-events

我无法在 React 上使用鼠标事件来更改 background-color

I cannot use mouse events on React to change background-color

reactjs

mouseevent