按钮充当复选框并更改样式？答案

【问题标题】：button to act as checkbox and change styles?按钮充当复选框并更改样式？
【发布时间】：2021-02-16 21:59:18
【问题描述】：

在我的任务中，我只能使用一个按钮，所以没有复选框。单击按钮，显示某些信息。我的代码正在运行，但我的问题是如何让类显示：无，再次单击按钮时？有点像切换开关？

const displayScores = (e) => {
    if (
      (e.target.parentNode.querySelector(
        ".display-score-container"
      ).style.display = "none")
    ) {
      e.target.parentNode.querySelector(
        ".display-score-container"
      ).style.display = "block";
      e.target.innerHTML = "-";
    } else {
      e.target.parentNode.querySelector(
        ".display-score-container"
      ).style.display = "none";
      e.target.innerHTML = "+";
    }
  };






return (
<div className="student-container">
              <img className="student-img" src={students.pic} />
              <div className="student-column">
                <p className="student-item">
                  {" "}
                  {students.firstName} {students.lastName}
                </p>
                <p className="student-item">Email: {students.email}</p>
                <p className="student-item">Company: {students.company}</p>
                <p className="student-item">Skill: {students.skill}</p>
                <p className="student-item">Average: {average}%</p>

                <div className="display-score-container">
                  <p className="student-score">
                    Test 1:{" "}
                    <p className="student-percentage">{students.grades[0]}%</p>
                  </p>
                  
                </div>
              </div>

              <button
                
                onClick={displayScores}
                className="expand-btn"
              >
                +
              </button>
)

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

您可以为此使用“活动”类或某个类，并为该特定类名编写 css。单击时将该类添加到按钮并切换值。并将条件放在您添加的类上 if (active){..} else{..}.

【讨论】：

【解决方案2】：

您可以使用React.useState 跟踪displayScore 并根据状态更新模板。

const [displayScore, setDisplayScore] = React.useState(true);

const handleDisplayScores = (e) => {
    setDisplayScore(!displayScore);
  };
          

return (
   <div className="student-container">
              <img className="student-img" src={students.pic} />
              <div className="student-column">
                <p className="student-item">
                  {" "}
                  {students.firstName} {students.lastName}
                </p>
                <p className="student-item">Email: {students.email}</p>
                <p className="student-item">Company: {students.company}</p>
                <p className="student-item">Skill: {students.skill}</p>
                <p className="student-item">Average: {average}%</p>

                {displayScore && (<div  className="display-score-container">
                  <p className="student-score">
                    Test 1:{" "}
                    <p className="student-percentage">{students.grades[0]}% 
                     </p>
                  </p>
                </div>)}

              </div>

              <button  
                onClick={handleDisplayScores}
                className="expand-btn">
                {displayScore ? '-' : '+'}  // set based on your use case.
              </button>
)

【讨论】：

【解决方案3】：

这是一个简单的方法。它正在工作。

const displayScores = e => {
            if (e.target.innerHTML === '+') {
                document.querySelector('.display-score-container').style.display =
                    'none';
                e.target.innerHTML = '-';
            } else {
                document.querySelector('.display-score-container').style.display =
                    'block';
                e.target.innerHTML = '+';
            }
        };

当然，这不是唯一的解决方案。这取决于你的洞项目。希望我对你有所帮助。祝你有美好的一天:)

【讨论】：