如何在 React 中使用 DOM 元素答案

【问题标题】：how to use DOM element in React如何在 React 中使用 DOM 元素
【发布时间】：2021-05-15 16:27:04
【问题描述】：

我想做 getElementById 来赋予 css 效果并点击滑动功能。如何在反应中使用 DOM？提前谢谢你。

    function Auth() {
    //this part needs to be fixed
    const signUpButton = document.getElementById('signUp');
    const signInButton = document.getElementById('signIn');
    const container = document.getElementById('body');
    
    signUpButton.addEventListener('click', () =>
    container.classList.add('right-panel-active'));

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

这些类名可以帮助你更好地理解我的代码。

    return (
        
        <div className ="auth">
            <div className="body" id="body">
                <SignUp className="test" />
                <SignIn className="test" />
                <div className="slide__body">
                    <div className="slides">
                        <div className="slide SignUp__left">
                        <p>Already have an account?</p>
                            <button className="slide__btn" id='signUp'  > Sign In </button>
                        </div>
                        <div className="slide SignIn__right">
                            <p>Not a Member?</p>
                            <button className="slide__btn" id='signIn'  > Sign Up </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

【问题讨论】：

在反应中你应该使用参考，你可能想看看这个reactjs.org/docs/hooks-reference.html#useref
是的，当你需要在 React 中直接访问 DOM 时，你应该使用 refs。并且有很多有效的用例。但是你应该总是三思而后行，看看是否有更“类似 React”的方式来做你想做的事。在这里，您似乎只想添加事件侦听器，您应该在 React 中通过将 onclick （等）属性添加到 JSX 输出来完成。（而不是强制添加类，这些事件处理程序应该切换某些状态，并且您呈现的输出应该根据该状态添加或不添加相关类。）
... 或者换句话说，您需要触发 onload 函数：window.onload= Auth; 否则您的 addEventListeners 将永远不会被添加...

标签： javascript css reactjs dom

【解决方案1】：

我想使用 React 的建议是你应该在组件状态下进行交互。

我建议你在你的组件中使用State，并根据一些交互添加一些

 function App() {
  const [mode, setMode] = React.useState();

  const handleMode = (mode) => {
    setMode(mode);
  };

  const containerClasses =
    mode === "signUp" ? "body right-panel-active" : "body";

  return (
    <div className="auth">
      <div className={containerClasses} id="body">
        <SignUp className="test" />
        <SignIn className="test" />
        <div className="slide__body">
          <div className="slides">
            <div className="slide SignUp__left">
              <p>Already have an account?</p>
              <button
                className="slide__btn"
                id="signUp"
                onClick={() => handleMode("signIn")}
              >
                {" "}
                Sign In{" "}
              </button>
            </div>
            <div className="slide SignIn__right">
              <p>Not a Member?</p>
              <button
                className="slide__btn"
                id="signIn"
                onClick={() => handleMode("signUp")}
              >
                {" "}
                Sign Up{" "}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

【讨论】：

【解决方案2】：

你应该避免在 React 中直接修改 dom。 React 假定它是唯一修改 dom 的代码，因此它不会知道您所做的任何更改。这打开了错误的可能性，其中 react 改变了你不期望的 dom 上的某些东西，或者没有改变你期望的东西。像你这样的简单代码不会有这些错误，但最好现在学习反应方式，这样你就不会在更复杂的代码中遇到这些问题。

实现这一点的反应方式是将 onClick 道具传递给需要它的元素，并拥有一个控制类名的状态变量。例如：

import React, { useState } from 'react';

function Auth() {
  const [showPanel, setShowPanel] = useState(false);

  return (
    <div className="auth">
      <div className={showPanel ? "body right-panel-active" : "body"}>
        <SignUp className="test" />
        <SignIn className="test" />
        <div className="slide__body">
          <div className="slides">
            <div className="slide SignUp__left">
              <p>Already have an account?</p>
              <button
                className="slide__btn"
                onClick={() => setShowPanel(false)}
              >
                Sign In
              </button>
            </div>
            <div className="slide SignIn__right">
              <p>Not a Member?</p>
              <button 
                className="slide__btn" 
                onClick={() => setShowPanel(true)}
              >
                Sign Up
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

【讨论】：