I am creating a frontend login form

user_14373448 0
Viewed 84

The stack I am currently using is:

React, React-redux, styled-components, css3

I'm writing a natural responsive login form, and I'm trying to fix it with hooks while watching a course.

  constructor(props) {
    super(props);
    this.state = {
      isLogginActive: true
    };
  }

  componentDidMount() {
    //Add .right by default
    this.rightSide.classList.add("right");
  }

  changeState() {
    const { isLogginActive } = this.state;

    if (isLogginActive) {
      this.rightSide.classList.remove("right");
      this.rightSide.classList.add("left");
    } else {
      this.rightSide.classList.remove("left");
      this.rightSide.classList.add("right");
    }
    this.setState(prevState => ({ isLogginActive: !prevState.isLogginActive }));
  }

  render() {
    const { isLogginActive } = this.state;
    const current = isLogginActive ? "Register" : "Login";
    const currentActive = isLogginActive ? "login" : "register";
    return (
      <div className="App">
        <div className="login">
          <div className="container" ref={ref => (this.container = ref)}>
            {isLogginActive && (
              <Login containerRef={ref => (this.current = ref)} />
            )}
            {!isLogginActive && (
              <Register containerRef={ref => (this.current = ref)} />
            )}
          </div>
          <RightSide
            current={current}
            currentActive={currentActive}
            containerRef={ref => (this.rightSide = ref)}
            onClick={this.changeState.bind(this)}
          />
        </div>
      </div>
    );
  }
}

const RightSide = props => {
  return (
    <div
      className="right-side"
      ref={props.containerRef}
      onClick={props.onClick}
    >
      <div className="inner-container">
        <div className="text">{props.current}</div>
      </div>
    </div>
  );
};

export default App;

I'm working on the code from the lecture with hooks, but I'm starting to get confused about how to write a ref in the DOM.

export default function Modal() {
  const dispatch = useDispatch();
  const { isModal } = useSelector((state) => state.modal_Reducer);
  const mainRef = useRef();
  const rightRef = useRef();

  const [isActive, setIsActive] = useState(true);

  useEffect(() => {
    rightRef.classList.add("right");
  }, []);

  const changeAuth = () => {
    if (isActive) {
      rightRef.classList.remove("right");
      rightRef.classList.add("left");
    } else {
      rightRef.classList.remove("left");
      rightRef.classList.add("rignt");
    }
    setIsActive(!isActive);
  };

  const onHideModal = () => {
    dispatch(hideModal());
  };

  if (!isModal) {
    return null;
  }

  const switchToSignup = isActive ? "Register" : "Login";

  const switchToSignin = isActive ? "Login" : "Register";

  return (
    <ModalBackground>
      <Main_Container>
        <Auth_box ref={mainRef}>
          {}
          {}
        </Auth_box>
        <RightSide
          ref={rightRef}
          switchLogin={switchToSignin}
          switcReg={switchToSignup}
          onClick
        />
      </Main_Container>
    </ModalBackground>

It is a modal component that converts to the signup form while css animation effect occurs when the signup button is pressed in the login form.

I used useRef, but I think it's not right to use classList.add and .remove, so I need to fix it, but I'm not sure how to do it. Help.

react-hooks reactjs
3 Answers

useEffect(() => {
    //rightRef.classList.add("right");
  }, []);

  const changeAuth = () => {
   /* if (isActive) {
      rightRef.classList.remove("right");
      rightRef.classList.add("left");
    } else {
      rightRef.classList.remove("left");
      rightRef.classList.add("rignt");
    }
    */
    setIsActive(!isActive);
  };

and then

 <RightSide
          clsName={isActive? "right":"left"}
          switchLogin={switchToSignin}
          switcReg={switchToSignup}
          onClick
        />

and update your component

const RightSide = props => {
  return (
    <div
      className={`right-side ${props.clsName}`}
      onClick={props.onClick}
    >
      <div className="inner-container">
        <div className="text">{props.current}</div>
      </div>
    </div>
  );
};

You can also explore https://www.npmjs.com/package/classnames npm package

user_31625400 

useEffect(() => {
    //rightRef.classList.add("right");
  }, []);

  const changeAuth = () => {
   /* if (isActive) {
      rightRef.classList.remove("right");
      rightRef.classList.add("left");
    } else {
      rightRef.classList.remove("left");
      rightRef.classList.add("rignt");
    }
    */
    setIsActive(!isActive);
  };

and then

 <RightSide
          clsName={isActive? "right":"left"}
          switchLogin={switchToSignin}
          switcReg={switchToSignup}
          onClick
        />

user_31625400

First, I set up a frame and kept working.

export default function Modal() {
  const dispatch = useDispatch();
  const { isModal } = useSelector((state) => state.modal_Reducer);
  const mainRef = useRef();
  const authRef = useRef();

  const [isActive, setIsActive] = useState(true);

  useEffect(() => {}, []);

  const changeAuth = () => {
    if (isActive) {
    } else {
    }
    setIsActive(!isActive);
  };

  const onHideModal = () => {
    dispatch(hideModal());
  };

  if (!isModal) {
    return null;
  }

  const switchToSignup = isActive ? "Register" : "Login";

  const switchToSignin = isActive ? "Login" : "Register";

  return (
    <ModalBackground>
      <Main_Container ref={mainRef}>
        <Auth_box>
          {isActive && <Login authRef={authRef} />}
          {!isActive && <Register authRef={authRef} />}
        </Auth_box>
      </Main_Container>
      <RightSide
        onSwitch={isActive ? "right" : "left"}
        switchSignIn={switchToSignin}
        switchRegister={switchToSignup}
        onClick={changeAuth}
      />
    </ModalBackground>
  );
}

function RightSide(props) {
  return (
    <Right_Side 
      className={`right-side ${props.onSwitch}`}
      ref={props.mainRef}
      onClick={props.changeAuth}
    >
      <div className="inner-container">
        <div className="text">{props.switchRegister}</div>
      </div>
    </Right_Side>
  );
}

The problem is the login form conversion page, but the original uses ref and passes it as props.

login and register transfer current as ref.

But I don't understand why the container passes this.container.

original

export class Login extends React.Component {
  constructor(props) {
    super(props);
  }


  render() {
    return (
      <div className="base-container" ref={this.props.containerRef}>
        <div className="header">Login</div>
        <div className="content">
          <div className="image">
            <img src={loginImg} />
          </div>
          <div className="form">
            <div className="form-group">
              <label htmlFor="username">Username</label>
              <input type="text" name="username" placeholder="username" />
            </div>
            <div className="form-group">
              <label htmlFor="password">Password</label>
              <input type="password" name="password" placeholder="password" />
            </div>
          </div>
        </div>
        <div className="footer">
          <button type="button" className="btn">
            Login
          </button>
        </div>
      </div>
    );
  }

my code

function Login(props) {
  const dispatch = useDispatch();
  const history = useHistory();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [submited, setSubmited] = useState(false);
  const [showPwd, setShowPwd] = useState(false);
  const [alert, setAlert] = useState("");

  const formInputValue = (key) => (e) => {
    if (key === "EMAIL") setEmail(e.target.value);
    if (key === "PASSWORD") setPassword(e.target.value);
    console.log(e.target.value);
  };
  const onLogin = async (e) => {
    e.preventDefault();

    if (!email || !password) {
      setAlert("이메일 주소와 비밀번호를 입력 하세요!");
    }

    let data = {
      email: email,
      password: password,
    };
    dispatch(loggedIn(data));
    history.push("/");
  };

  return (
    <PanelContainer ref={props.authRef}>
      <h1>로그인</h1>
      <PanelContent>
        <Form onSubmit={onLogin}>
          <InputGroup>
            <label htmlFor="email">E-Mail</label>
            <Input
              type="text"
              name="email"
              value={email}
              onChange={formInputValue("EMAIL")}
              placeholder="E-mail"
            />
          </InputGroup>
          <InputGroup>
            <label htmlFor="password">Password</label>
            <Input
              type={showPwd ? "text" : "password"}
              name="password"
              value={password}
              onChange={formInputValue("PASSWORD")}
              placeholder="Password"
            />
          </InputGroup>
          <SubmitBtn> 로그인 </SubmitBtn>
        </Form>
      </PanelContent>
    </PanelContainer>
  );
}

export default Login;
user_143734480
Related