我在 onClick 中的 if-else-then 逻辑不会导致任何 DOM 变化

Question

我只想创建一个 returns "login" 如果我点击登录 div 和注册相同的功能。

但我的代码总是 returns else 条件，即使单击应该更改参数值的 div 也是如此。

const Join = () => {
  const form = (state) =>  {
    if (state == 'login') {
      return "login"
    } else if (state == 'logup') {
      return "logup"
    } else {
      return "external-box"
    }
  };
  return (
    <div className='Join'>
      <div className={form()}> 
        <div className='signin-section' onClick={() => form('login')}>Sign in</div>
        <div className='signup-section'onClick={() => form('logup')}>Sign up</div>
        <div className='loginfrm'>login</div>
        <div className='logupfrm'>logup</div>
      </div>
    </div>
  )
}

ReactDOM.render(<Join />, document.getElementById("root"));

<div id=root></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

Answer 1

不，它没有 return 其他部分。

const Join = () => {
  const form = (state) =>  {
    if (state == 'login') {
      return "login"
    } else if (state == 'logup') {
      return "logup"
    } else {
      return "external-box"
    }
  };
  return (
    <div className='Join'>
      <div className={form()}> 
        <div className='signin-section' onClick={() => alert(form('login'))}>Sign in</div>
        <div className='signup-section'onClick={() => alert(form('logup'))}>Sign up</div>
        <div className='loginfrm'>login</div>
        <div className='logupfrm'>logup</div>
      </div>
    </div>
  )
}

ReactDOM.render(<Join />, document.getElementById("root"));

<div id=root></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

Answer 2

无法捕获 onClick 回调返回的值。您可以使用 useState 声明初始状态并跟踪更改以描述应显示哪个部分。然后在JSX部分，可以通过这个状态变量来判断是需要展示一种形式还是另一种形式。

你可以看到一个工作示例here

import { useState } from "react";

export default function App() {
  const [visibleSection, setVisibleSection] = useState("login");

  const form = () => {
    if (visibleSection === "login") {
      return "login";
    } else if (visibleSection === "signup") {
      return "signup";
    } else {
      return "external-box";
    }
  };

  return (
    <div className="Join">
      <div className={form()}>
        <div
          className="signin-section"
          onClick={() => setVisibleSection("login")}
        >
          Sign in
        </div>
        <div
          className="signup-section"
          onClick={() => setVisibleSection("signup")}
        >
          Sign up
        </div>
        <br />
        {visibleSection === "login" && <div className="loginfrm">login</div>}
        {visibleSection === "signup" && <div className="logupfrm">signup</div>}
      </div>
    </div>
  );
}

我在 onClick 中的 if-else-then 逻辑不会导致任何 DOM 变化

My if-else-then logic in onClick does not result in any DOM change

if-statement

reactjs