import React, { useState } from "react";

function App() {
  const [headingText, setHeadingText] = useState("Hello");

  const changeColor = { backgroundColor: "" };
  function handleClic,reactjs"/>
	














    

		

        

            
            时间戳
        

		

		

        
		

    
















	
首页  > 解决方案 > 无法分配给对象“#”的只读属性“backgroundColor”'

import React, { useState } from "react";

function App() {
  const [headingText, setHeadingText] = useState("Hello");

  const changeColor = { backgroundColor: "" };
  function handleClic












reactjs - 无法分配给对象“#”的只读属性“backgroundColor”'

import React, { useState } from "react";

function App() {
  const [headingText, setHeadingText] = useState("Hello");

  const changeColor = { backgroundColor: "" };
  function handleClic





问题描述



标签： reactjs


解决方案









我尝试了您的代码，但没有收到您提到的错误。




错误：无法分配给对象“#”的只读属性“backgroundColor”




同样更改常量changeColor不会对按钮产生影响，因为它不会导致重新渲染。您需要将其用作state变量。


const [changeColor, setChangeColor] = useState({ backgroundColor: "" });

  function handleMouseOver() {
    setChangeColor({
      backgroundColor: "black"
    });
  }
  function handleMouseOut() {
    setChangeColor({
      backgroundColor: "white"
    });
  }



但这也可以使用:hover选择器来实现，如下所示


.button_submit:hover {
  background-color: black;
}



对于按钮


<button 
    className="button_submit"
    onClick={handleClick}
>
    Submit
</button>











推荐阅读