reactjs - 条件按钮真假反应

Question

我相信错误可能在这里......

{options.map((option) => (
          <button
            key={option}
            className={`${myAnswer === option
                ? "true"
                : myAnswer !== option
                ? "button"
                : "false"
            }`}
            onClick={() => this.checkAnswer(option)}
          >
            {option}
          </button>
        ))}

我如何确保当用户单击正确答案时 True 类（出现）以及当他单击错误答案时 False 类出现在其他按钮上。是否可以在第一次单击后将按钮禁用，从而无法更改答案？

• • • 演示代码< - - -

标签： reactjsreact-hooksconditional-statementscreate-react-app

Answer 1

是否可以在第一次单击后将按钮禁用，从而无法更改答案？

是的，我们可以通过不同的方式禁用这些操作。在下面的示例中，我使用isSubmitted它来了解是否在单击答案时执行操作。我们也可以禁用使用css。

const { useState } = React;

const data = {
  question: "Dummy Question?",
  answers: ["A", "B", "C", "D"],
  correctAnswer: "B"
}

const Quiz = () => {
  const [selectedAnswer, setSelectedAnswer] = useState("");
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [isError, setIsError] = useState(false);
    
  const onSelectAnswer = answer => {
    if(isSubmitted) return;

    setIsSubmitted(true);
    setSelectedAnswer(answer);
    setIsError(data.correctAnswer !== answer);
  }
  
  const getAnswerClass = (answer) => {
    if(!isSubmitted) {  
      return "";
    } else if(data.correctAnswer === answer) {
      return "correct";
    }
    return isError ? "incorrect": "";
  }
  
  return (
    <div>
      <h3>{data.question}</h3>
      {data.answers.map(answer => (
        <p key={answer} 
          className={getAnswerClass(answer)}
          onClick={() => { onSelectAnswer(answer)}}
        >
          {answer}
        </p>
      ))}
    </div>
  )
}

ReactDOM.render(<Quiz />, document.getElementById("react"));

p {
  border: 1px solid lightgrey;
  padding: 20px;
}

.correct {
  background: #5aad5a;
}

.incorrect {
  background: #fa7f7f;
}

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

<div id="react"></div>

在这里，为简单起见，我只使用了一个问题。但这可以根据您的要求进行扩展。