為什么我無法在 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