在reactJS，功能组件中更改MouseOver事件的样式答案

【问题标题】：Change style on MouseOver event in reactJS, functional component在reactJS，功能组件中更改MouseOver事件的样式
【发布时间】：2020-01-24 04:16:30
【问题描述】：

我有一个组件和三个 div 标签。在div 标记之一中，我创建了onMouseOver 事件并尝试更改文本onMouseOver 的颜色。

React onMouseOver、onMouseEnter 事件和样式在 React 中动态变化。

import React from 'react'

function Middle() {
    const styles = {


        'text-align': 'center',
        'padding': '30px',
    }
    function myName() {
        styles.color = "green"

    }
    function noName() {

    }

    return (
        <div className="middle">

            <div id="cspace" style={styles} onMouseEnter={myName} onMouseLeave={noName}>
                <h1>Hello World</h1>
            </div>

        </div>
    )
}

export default Middle

我希望 div 中文本的颜色会发生变化。我得到的输出是：

“无法添加属性颜色，对象不可扩展”

【问题讨论】：

为什么要使用onMouseOver 事件？您可以将 :hover 添加到 div 的 css 类中并以这种方式更改颜色。
1.你可以用钩子来做。 2.查看react-usestyles：github.com/andywer/react-usestyles
理想情况下，使用 CSS 是最好的方法
是的，你是对的：hover。我只是想了解为什么在使用函数更新对象后css更改在那个地方不起作用。

标签： javascript css reactjs event-handling mouseover

【解决方案1】：

对于功能组件，这是使用useState 挂钩存储color 值的好场景。

function App() {
  const [color, setColor] = React.useState("");
  const styles = {
    "text-align": "center",
    padding: "30px",
    color: color
  };

  return (
    <div className="middle">
      <div
        id="cspace"
        style={styles}
        onMouseEnter={() => setColor("green")}
        onMouseLeave={() => setColor("")}
      >
        <h1>Hello World</h1>
      </div>
    </div>
  );
}

See CodeSandbox

【讨论】：

【解决方案2】：

我建议您不要使用onMouseEnter 和onMouseLeave，而是使用CSS，因为与onMouseEnter 和onMouseLeave 等Javascript 操作相比，这些操作是轻量级的

function Middle() {
    const styles = {
        'text-align': 'center',
        'padding': '30px',
    }
    return (
        <div className="middle">

            <div id="cspace" style={styles}>
                <h1>Hello World</h1>
            </div>

        </div>
    )
}

ReactDOM.render(<Middle />, document.getElementById("root"));

#cspace:hover{
  color: green;
  cursor:pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：

【解决方案3】：

您只能使用 css 来做到这一点。试试这个。

#cspace:hover{color:red;}

【讨论】：