Reactjs 如何在React中将函数转换为类？

我正在尝试创建这个滑动登录/注册门户，但最初的代码是在Vanilla JS上。组件似乎已卸载到Dom上，程序无法通过其id找到类列表。我尝试了几次使用Component Dod mount，但它抛出了错误，后来我发现我对react上的类与函数缺乏了解

componentDidMount（）

似乎只适用于类。现在我似乎找不到有效的解决办法。此外，我可能会忘记，在呈现组件时，何时我真的需要使用类与函数？如果使用函数而不是类，如何防止在DOM中调用未装载的元素

这是门户的原始Html、css和js代码

const signUpButton=document.getElementById（'signUp'）；
const signInButton=document.getElementById（'signIn'）；
const container=document.getElementById（'container'）；
signUpButton.addEventListener（'单击'，（）=>{
container.classList.add（“右面板活动”）；
});
signInButton.addEventListener（'单击'，（）=>{
container.classList.remove（“右面板激活”）；
});
@导入url（'https://fonts.googleapis.com/css?family=Montserrat:400,800');
* {
框大小：边框框；
}
身体{
背景#f6f5f7；
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
字体系列：“蒙特塞拉特”，无衬线；
高度：100vh；
利润率：-20px 0 50px；
}
h1{
字体大小：粗体；
保证金：0；
}
氢{
文本对齐：居中；
}
p{
字体大小：14px；
字号：100；
线高：20px；
字母间距：0.5px；
利润率：20px 0 30px；
}
跨度{
字体大小：12px；
}
a{
颜色：#333；
字体大小：14px；
文字装饰：无；
利润率：15px0；
}
钮扣{
边界半径：20px；
边框：1px实心#FF4B2B；
背景色：#FF4B2B；
颜色：#FFFFFF；
字体大小：12px；
字体大小：粗体；
填充：12px 45px；
字母间距：1px；
文本转换：大写；
过渡：80毫秒易用转换；
}
按钮：激活{
变换：比例（0.95）；
}
按钮：焦点{
大纲：无；
}
按钮。幽灵{
背景色：透明；
边框颜色：#FFFFFF；
}
形式{
背景色：#FFFFFF；
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
填充：0 50px；
身高：100%；
文本对齐：居中；
}
输入{
背景色：#eee；
边界：无；
填充：12px 15px；
利润率：8px0；
宽度：100%；
}
.集装箱{
背景色：#fff；
边界半径：10px；
盒影：0 14px 28px rgba（0,0,0,0.25），
0 10px 10px rgba（0,0,0,0.22）；
位置：相对位置；
溢出：隐藏；
宽度：768px；
最大宽度：100%；
最小高度：480px；
}
.表格容器{
位置：绝对位置；
排名：0；
身高：100%；
过渡：所有0.6秒缓进缓出；
}
.签收集装箱{
左：0；
宽度：50%；
z指数：2；
}
.container.right-panel-active.登录container{
转化：translateX（100%）；
}
.注册集装箱{
左：0；
宽度：50%；
不透明度：0；
z指数：1；
}
.container.right-panel-active.注册容器{
转化：translateX（100%）；
不透明度：1；
z指数：5；
动画：显示0.6s；
}
@关键帧显示{
0%, 49.99% {
不透明度：0；
z指数：1；
}
50%, 100% {
不透明度：1；
z指数：5；
}
}
.覆盖容器{
位置：绝对位置；
排名：0；
左：50%；
宽度：50%；
身高：100%；
溢出：隐藏；
转换：转换0.6s易入易出；
z指数：100；
}
.container.right-panel-active.overlay container{
转化：translateX（-100%）；
}
.覆盖{
背景#FF416C；
背景：-webkit线性梯度（向右，#FF4B2B，#FF416C）；
背景：线性梯度（向右，#FF4B2B，#FF416C）；
背景重复：无重复；
背景尺寸：封面；
背景位置：0；
颜色：#FFFFFF；
位置：相对位置；
左-100%；
身高：100%；
宽度：200%；
变换：translateX（0）；
转换：转换0.6s易入易出；
}
.container.right-panel-active.overlay{
转化：translateX（50%）；
}
.覆盖面板{
位置：绝对位置；
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
填充：0 40px；
文本对齐：居中；
排名：0；
身高：100%；
宽度：50%；
变换：translateX（0）；
转换：转换0.6s易入易出；
}
.左重叠{
转化：translateX（-20%）；
}
.container.right-panel-active.overlay-left{
变换：translateX（0）；
}
.右上角{
右：0；
变换：translateX（0）；
}
.container.right-panel-active.overlay-right{
转化：translateX（20%）；
}
.社会容器{
利润率：20px0；
}
.社会容器a{
边框：1px实心#DDDDDD；
边界半径：50%；
显示：内联flex；
证明内容：中心；
对齐项目：居中；
利润率：0.5px；
高度：40px；
宽度：40px；
}
页脚{
背景色：#222；
颜色：#fff；
字体大小：14px；
底部：0；
位置：固定；
左：0；
右：0；
文本对齐：居中；
z指数：999；
}
页脚p{
利润率：10px0；
}
页脚一{
颜色：红色；
}
页脚a{
颜色：#3c97bf；
文字装饰：无；
}

创建帐户
或者使用您的电子邮件进行注册
注册
登录
或者使用您的帐户
登录
欢迎回来！
保持联系
class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      setLoading: false,
      email: props.email,
      password: props.password,
      error: null,
      setError: null
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }


 
  
  componentDidMount(){
    const signUpButton =  document.getElementById('signUp');
    const signInButton = document.getElementById('signIn');
    const container = document.getElementById('container');

    if (container){
      console.log('loaded');
      signUpButton.addEventListener('click', () => {
        container.classList.add("right-panel-active");
      });

      signInButton.addEventListener('click', () => {
        container.classList.remove("right-panel-active");
      });
    }
  }

  handleChange(event) {
    this.setState({
      [event.target.type]: event.target.value
    });
  }

  handleSubmitSignIn(event) {
    // alert('A name was submitted: ' + this.state.email + this.state.password);
    event.preventDefault();
    console.log(this.state.email);
    console.log(this.state.password);
  }

  handleSubmitSignUp(event) {
    // alert('A name was submitted: ' + this.state.email + this.state.password);
    event.preventDefault();
    console.log(this.state.email);
    console.log(this.state.password);
  }
  
  render() {
    return (

      <div className="container" id="container">
        <div className="form-container sign-up-container">
          <form onSubmit={this.handleSubmitSignUp}>
            <h1>Create Account</h1>
            <div className="social-container">
              <a href="#" className="social"><i className="fab fa-facebook-f"></i></a>
              <a href="#" className="social"><i className="fab fa-google-plus-g"></i></a>
              <a href="#" className="social"><i className="fab fa-linkedin-in"></i></a>
            </div>
            <span>or use your email for registration</span>
            <input type="text" placeholder="Name" autoComplete="new-name" />
            <input type="email" placeholder="Email" autoComplete="new-email" />
            <input type="password" placeholder="Password" autoComplete="new-password" />
            <input type="department" placeholder="Department" autoComplete="new-name" />
            <input type="year" placeholder="Year" autoComplete="new-email" />
            <input type="schoolId" placeholder="School Id No." autoComplete="new-password" />
            <button>Sign Up</button>
          </form>
        </div>
        <div className="form-container sign-in-container">
          <form onSubmit={this.handleSubmitSignIn}>
            <h1>Sign in</h1>
            <div className="social-container">
              <a href="#" className="social"><i className="fab fa-facebook-f"></i></a>
              <a href="#" className="social"><i className="fab fa-google-plus-g"></i></a>
              <a href="#" className="social"><i className="fab fa-linkedin-in"></i></a>
            </div>
            <span>or use your account</span>
            <input type="email" placeholder="Email" value={this.state.email} autoComplete='new-email' onChange={this.handleChange}/>
            <input type="password" placeholder="Password" value={this.state.password} autoComplete='new-password' onChange={this.handleChange}/>
            <a href="#">Forgot your password?</a>
            <button type='submit' >Sign In</button>
          </form>
        </div>
        <div className="overlay-container">
          <div className="overlay">
            <div className="overlay-panel overlay-left">
              <h1>Welcome Back!</h1>
              <p>To keep connected with us please login with your personal info</p>
              <button className="ghost" id="signIn">Sign In</button>
            </div>
            <div className="overlay-panel overlay-right">
              <h1>Hello</h1>
              <p>Enter your personal details and start journey with us</p>
              <button className="ghost" id="signUp">Sign Up</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}


export default Login;