我在onClick中的if-else-then邏輯不會導致任何DOM更改

我只想創建一個函式，"login"如果我點擊登錄則回傳div，并且與注冊相同。

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>

uj5u.com熱心網友回復：

無法捕獲 onClick 回呼回傳的值。您可以使用useState來宣告初始狀態并跟蹤更改以描述應顯示的部分。然后在 JSX 部分，你可以使用這個狀態變數來檢查是否需要顯示一個表單或另一個。

你可以在這里看到一個作業示例

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>
  );
}

uj5u.com熱心網友回復：

不，它不回傳其他部分。

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>

標籤：反应 if 语句

上一篇：如果f1匹配，如何列印else

下一篇：else陳述句在反應中被忽略