为什么我无法在 React 组件内的鼠标事件处理程序的 function 中设置样式？

Question

我的代码如下：我正在学习 ReactJS。 尝试更改鼠标 hover 上按钮的背景颜色。 我知道 css:hover 是最简单的方法。 但是做这个实现要学。

如果我使用 if else 条件检查“悬停”值，它工作正常。 但它给出了错误“TypeError

当我尝试在 onMouseEnter 和 onMouseLeave 事件处理函数中设置背景颜色时，无法分配给 object '#'" 的只读属性 'backgroundColor'。

这里的只读属性是什么？ 我还没有把它变成常量。 默认是只读的吗？ 我如何覆盖它？

import React, { useState } from "react";
 
function App() {
  
  let [ hover, setState] = useState(false);
 
  let buttonStyle = {
    backgroundColor:''
  }
 
  function hoverActive(){
    setState(true);    
    buttonStyle.backgroundColor='black';
  }
 
  function hoverInactive(){
    setState(false);    
    buttonStyle.backgroundColor='';    
  }
 
  if(hover){
    //buttonStyle.backgroundColor='black';    
  }
  else{
    //buttonStyle.backgroundColor='';    
  }
 
  return (
    <div className="container">
      <h1>Hello</h1>
      <input type="text" placeholder="What's your name?" />
      <button style={buttonStyle} onMouseEnter={hoverActive} onMouseLeave={hoverInactive}>Submit</button>
    </div>
  );
}
 
export default App;

Answer 1

它与 object 在 javascript 中的工作方式有关。 参考.. 无法分配给 object '[object Object]' 的只读属性 'name'

您可以参考 object 并使用 State 或 Ref 来更新背景颜色。

import React, { useState } from "react";

function App() {
  let [hover, setState] = useState(false);

  let buttonStyle = {
    backgroundColor: "",
  };
  const [ButtonStyle, setButtonStyle] = useState(buttonStyle);

  function hoverActive() {
    setState(true);
    const data = { ...buttonStyle, backgroundColor: "green" };
    setButtonStyle(data);
  }

  function hoverInactive() {
    setState(false);
    const data = { ...buttonStyle, backgroundColor: "" };
    setButtonStyle(data);
  }

  return (
    <div className="container">
      <h1>Hello</h1>
      <input type="text" placeholder="What's your name?" />
      <button
        style={ButtonStyle}
        onMouseEnter={hoverActive}
        onMouseLeave={hoverInactive}
      >
        Submit
      </button>
    </div>
  );
}

export default App;

Answer 2

实现您想要的几种方法：

使用 useState 钩子

您现在在代码中遇到的问题是buttonStyle不是 state 并且 React 只是忽略了您对该变量所做的更改。

 function App() { let [hover, setState] = React.useState(false); function hoverActive() { setState(true); } function hoverInactive() { setState(false); } return ( <div className="container"> <h1>Hello</h1> <input type="text" placeholder="What's your name?" /> <button style={{ backgroundColor: hover? "black": "", color: hover? "white": "black" }} onMouseEnter={hoverActive} onMouseLeave={hoverInactive} > Submit </button> </div> ); } ReactDOM.render(<App />, document.querySelector('.react'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>

使用 React 引用

您可以使用 React ref 来实现它（对 function 组件使用useRef挂钩）：

 function App() { const buttonRef = React.useRef(null); function hoverActive() { buttonRef.current.style.backgroundColor = "black"; buttonRef.current.style.color = "white"; } function hoverInactive() { buttonRef.current.style.color = "black"; buttonRef.current.style.backgroundColor = ""; } return ( <div className="container"> <h1>Hello</h1> <input type="text" placeholder="What's your name?" /> <button ref={buttonRef} onMouseEnter={hoverActive} onMouseLeave={hoverInactive} > Submit </button> </div> ); } ReactDOM.render(<App />, document.querySelector('.react'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>

使用 CSS

 function App() { return ( <div className="container"> <h1>Hello</h1> <input type="text" placeholder="What's your name?" /> <button id="my-button">Submit</button> </div> ); } ReactDOM.render(<App />, document.querySelector('.react'));

 #my-button:hover { background-color: black; color: white; }

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>

Answer 3

buttonStyle 不会导致组件重新渲染，因为值无法更新或操作。 一个好的方法是 useState 挂钩并根据需要更新 state

const [buttonStyle, setButtonStyle] = useState({ backgroundColor: '' })
const handleHover = () => {
   setState(!hover);

  if (hover) {
     setButtonStyle({ ...buttonStyle, backgroundColor: '#fff' });
  } else {
    setButtonStyle({ ...buttonStyle, backgroundColor: 'red' });
  }
};
<div className="container">
  <h1>Hello</h1>
  <input type="text" placeholder="What's your name?" />
  <button
    style={buttonStyle}
    onMouseEnter={handleHover}
    onMouseLeave={handleHover}
  >
    Submit
  </button>
</div>

在设置 object state 时，我使用扩展运算符作为其标准做法。 这不会改变原始 state。 根据他们所做的事情来命名你的 setState 的最佳实践，例如 setButtonStyle、setHoveredOn