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

Question

我有一个组件和三个 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 中文本的颜色。我得到的输出是：

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

原文由 Krishna M 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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>
  );
}

请参阅代码沙盒

原文由 Joseph D. 发布，翻译遵循 CC BY-SA 4.0 许可协议