错误提示 TypeError: 无法读取未定义的属性 'getElementById'

Question

import React, { document } from "react";
import "./LoginandRegister.css";

function LoginandRegister() {
  const signUpButton = document.getElementById("signUp");
  const signInButton = document.getElementById("signIn");
  const container = document.getElementById("container");

  signUpButton.addEventListener("click", () =>
    container.classList.add("right-panel-active")
  );
  signInButton.addEventListener("click", () =>
    container.classList.remove("right-panel-active")
  );

Answer 1

在 React 中有很多处理按钮交互的方法，但是使用getElementById和附加事件监听器不被认为是正常/好的做法。 您还应该确保向className道具提供任何 css 类，而不是使用classList.add(...) ，假设signUp 、 signIn和container都被呈现为 React 组件或 JSX。

查看React 中的处理事件，了解有关如何处理按钮点击的一些灵感 go 。

此外，从 react package 导入document会覆盖默认文档 object，您可以使用它来附加事件侦听器。 所以我猜如果你删除导入它会起作用，所以它只是说import React from 'react' 。 虽然我认为这仍然不是一个合适的解决方案，但您绝对应该看看 React 文档。