Question

我不确定为什么会出现此错误，我只是想制作一个在悬停时反转颜色的按钮，如果您有解决方案或更好的方法，请告诉我

import React, {useState} from 'react'


function Login() {

  const [bttnColor, setBttnColor] = useState('white')
  const [textColor, setTextColor] = useState('black')

  function colorChange1(){
  setBttnColor('black')
  setTextColor('white')
  }
  function colorChange2(){
    setBttnColor('white')
    setTextColor('black')
    }

  return (
    <div className="Login" style={{display:'flex', flexDirection:'column', justifyContent:'center', alignItems:'center'}}>
     <h1 style={{display:'flex',  marginTop:'400px', marginBottom:'40px'}}>Login</h1>
    <input style={{height:'30px', width:'140px', marginBottom:'10px'}} placeholder='Username'/>
    <input style={{height:'30px', width:'140px'}} type='password'placeholder='Password'/>
    <button style={{height:'30px', width:'140px', marginTop:'10px', background:bttnColor, color:textColor}} onMouseEnter={colorChange1()} onMouseLeave={colorChange2()}>Login</button>:
    </div>
  )
}

export default Login

Answer 1

在声明一个属性时，{} 内部内容的结果被发送到组件。

这会将 colorChange1() 的结果发送给组件，而不是函数本身

onMouseEnter={colorChange1()}

在您的用例中这是不需要的行为，但请记住，这是一个与任何其他属性一样的属性，例如 style 或 className。

你需要给它传递一个函数引用而不是函数的结果。您可以通过两种不同的方式做到这一点：

onMouseEnter={colorChange1}
onMouseEnter={(event) => colorChange1(event, otherVariables...)}

第一种方式是对现有函数的函数引用。当你不需要向函数传递任何其他信息时使用这个

第二种方法是用 lambda 包装函数调用。这将允许您从当前作用域中获取变量，并在方法运行时将它们传递给方法。

编辑：

再想一想，这样做会使事情变得比实际需要的复杂得多。这可以在几行 CSS 中完成。

让我们移除那些颜色更改方法以及 onMouseEnter 和 onMouseLeave 调用，并为按钮指定一个 className 以便我们可以在 CSS 中引用它。

    <button className="login-button">Login</button>:

然后让我们在与 Login.js 相同的文件夹中创建以下 css 文件，命名为 Login.css：

.login-button {
  height: 30px;
  width: 140px;
  marginTop: 10px;
  background:white;
  color:black;
}
.login-button:hover {
  background: black;
  color: white;
}

最后，让我们导入 css 文件：

import "./Login.css";

反应太多重新渲染无限循环

1 个答案: