时间戳

首页 > 解决方案 > 切换选项无法正确使用 useState

javascript - 切换选项无法正确使用 useState

问题描述

我有以下组件：

import React, {
    Fragment,
    useState
} from "react";
import PropTypes from "prop-types";
import {
    connect
} from "react-redux";

import {
    Link,
    withRouter
} from "react-router-dom";

const ChooseRole = () => {
    //   const [role, setRole] = useState({
    //     business: false,
    //     jobSeeker: false
    //   });

    const [business, toggleBusiness] = useState(false);
    const [jobSeeker, toggleJobSeeker] = useState(false);

    const onClick = (e, roleType) => {
        switch (roleType) {
            case "business":
                toggleBusiness(!business);

                if (business === true) {
                    toggleJobSeeker({
                        jobSeeker: false
                    });
                }
                break;

            case "jobSeeker":
                toggleJobSeeker(!jobSeeker);

                if (jobSeeker === true) {
                    toggleBusiness({
                        business: false
                    });
                }
                break;
        }
    };
 return (
      <Fragment>
           <h1>First thing's first</h1>
           <h3 className="mt-4">I'm a...</h3>
           <h3
           name="business"
           className={business === true ? "text-primary" : ""}
           style={{ cursor: "pointer" }}
           onClick={e => onClick(e, "business")}
           >
           Business
           </h3>
           <h3
           name="jobSeeker"
           className={jobSeeker === true ? "text-primary" : ""}
           style={{ cursor: "pointer" }}
           onClick={e => onClick(e, "jobSeeker")}
           >
           Talent
           </h3>
      </Fragment>
 );

当我单击h3呈现的任一元素时，未正确添加 className。点击，比如说，商业——那个h3的文本应该变成橙色。再次单击它应将其变回黑色。如果文字业务为橙色，点击人才应将人才文字变为橙色，将业务文字变为黑色。但由于某种原因，点击业务，然后点击人才，它们都变成了橙色。再次单击其中一个会使它们都变回黑色。我不确定我在这里做错了什么，我在某处有逻辑错误吗？

标签： javascriptreactjs

解决方案

您的问题是您在状态中设置对象而不是布尔值。您还需要引用正确的变量。而不是检查业务是否真实并将求职者变为虚假..只需在业务切换时检查求职者是否为真

switch (roleType) {
  case "business":
    toggleBusiness(!business);

    if (jobSeeker === true) {
      toggleJobSeeker(false);
    }
    break;

  case "jobSeeker":
    toggleJobSeeker(!jobSeeker);

    if (business === true) {
      toggleBusiness(false);
    }
    break;
}

在行动中看到它！

推荐阅读