文章/答案/技术大牛

发布

社区首页 >问答首页 >如果-否则，onClick中的逻辑不会导致任何DOM更改。

问如果-否则，onClick中的逻辑不会导致任何DOM更改。
EN

Stack Overflow用户

提问于 2022-04-18 09:23:46

回答 2查看 36关注 0票数 0

我只想创建一个返回"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>

reactjs

if-statement

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-04-18 09:55:14

不可能捕获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>
  );
}

票数 1

Stack Overflow用户

发布于 2022-04-18 09:39:30

不，它不返回其他部分。

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71909933

复制

相似问题

问如果-否则，onClick中的逻辑不会导致任何DOM更改。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果-否则，onClick中的逻辑不会导致任何DOM更改。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果-否则，onClick中的逻辑不会导致任何DOM更改。
EN