在 React.js 中单击时注销按钮没有响应

Question

我做了一个简单的注销 button/function，我几乎可以肯定它应该有效，但它没有，而且也没有任何错误。这是我的代码：

import {Link} from 'react-router-dom';
import { CredentialsContext } from '../App';
import Todos from '../Components/Todos';

export default function Welcome() {
  const [credentials, setCredentials] = useContext(CredentialsContext)
  const logout = () => {
    setCredentials(null);
  }
  return (
    <div>
        {credentials && <button onChange={logout}>Logout</button>}
        <h1>Welcome {credentials && credentials.username}</h1>
        {!credentials &&<Link to="/register">Register</Link>}
        <br/>
        {!credentials &&<Link to="/login">Login</Link>}
        {credentials && <Todos/>}
    </div>
  )
}

我的后端可能与它有关吗？

Answer 1

<button onChange={logout}>Logout</button>

为什么要在按钮中使用 onChange 事件？

<button onClick={logout}>Logout</button>

使用 onClick 事件而不是 onChange 事件。

Answer 2

只需使用 onClick 事件，而不是 onChange。

祝你好运！

Answer 3

尝试使用

{credentials && <button onChange={()=>{logout}}>Logout</button>}

或{credentials && <button onClick={()=>{logout}}>Logout</button>}

在 React.js 中单击时注销按钮没有响应

Logout button doesn't respond when clicked in React.js

javascript

reactjs

logout