ReactJS实现登录注册滑动动画遇null读取错误求助

问题描述 #

开发了包含登录（Sign In）和注册（Sign Up）模块的登录页面，希望通过点击按钮触发滑动动画切换显示模块，但运行时报错：cannot read properties of null (reading 'addeventlistener')。期望实现左右滑动切换登录/注册模块的交互效果。

错误原因 #

当前写法存在几个核心问题：

• 在组件外部直接调用document.getElementById时，React组件还未渲染到DOM中，因此获取到的container、registerBtn、loginBtn均为null，无法调用addEventListener方法。
• 组件内部嵌入<script>标签不符合React开发规范，React不需要这种方式引入脚本。
• 登录按钮用了removeEventListener但未先添加对应事件监听，逻辑错误。
• 存在拼写错误：比如sing-up应为sign-up，toogle应为toggle，会导致CSS样式无法正确生效。

修正方案 #

改用React的状态管理和内置事件绑定实现，避免直接操作DOM：

import { useState } from 'react';
import Fas from 'react-icons/fa';

function Login() {
  // 用状态控制容器的激活类
  const [isActive, setIsActive] = useState(false);

  return (
    <div className={`login_container ${isActive ? 'active' : ''}`} id='container'>
      <div className='form-container sign-up'>
        <form>
          <h1>Create Account</h1>
          <div className='social-icons'>
            <i><Fas.FaGooglePlusG /></i>
            <i><Fas.FaFacebook /></i>
          </div>
          <span>O usa tu email para registrarte</span>
          <input type='text' placeholder='Nombre' />
          <input type='email' placeholder='Email' />
          <input type='password' placeholder='Password' />
          <button type='button'>Sign Up</button>
        </form>
      </div>
      <div className='form-container sign-in'>
        <form>
          <h1>Sign In</h1>
          <div className='social-icons'>
            <i><Fas.FaGooglePlusG /></i>
            <i><Fas.FaFacebook /></i>
          </div>
          <span>O usa tu email para iniciar sesión</span>
          <input type='email' placeholder='Email' />
          <input type='password' placeholder='Password' />
          <button type='button'>Sign In</button>
        </form>
      </div>
      <div className='toggle-container'>
        <div className='toggle'>
          <div className='toggle-panel toggle-left'>
            <h1>Welcome Back!</h1>
            <p>Enter your personal details to use all of site features</p>
            <button className='hidden' onClick={() => setIsActive(false)}>Sign In</button>
          </div>
          <div className='toggle-panel toggle-right'>
            <h1>Hello!</h1>
            <p>Register with your personal email or social media</p>
            <button className='hidden' onClick={() => setIsActive(true)}>Sign Up</button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Login;

关键说明 #

1. 状态管理：用useState创建isActive状态，通过setIsActive切换状态，动态给容器添加/移除active类，触发滑动动画。
2. 事件绑定：直接在按钮元素上用onClick绑定事件处理函数，符合React声明式编程范式，无需手动操作DOM。
3. 细节优化：修正输入框类型（邮箱用email、密码用password），给按钮添加type="button"避免表单默认提交，修正拼写错误确保CSS样式匹配。

内容的提问来源于stack exchange，提问作者Ismael Sanchez