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

Question

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

React中onMouseOver，onMouseEnter事件和样式是动态变化的。

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 中文本的颜色发生变化。我得到的输出是：

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

Answer 1

对于功能组件来说，这是使用useStatehook来存储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>
  );
}

参见CodeSandbox

Answer 2

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

#cspace:hover{color:red;}