Question

第一次在这里发布..大声笑

我是React的新手，通常是全栈开发的，我的代码有一个小问题。我正在设计测验，我希望用户选择一个选项后禁用这些选项（或答案）（因此，一旦他们选择了一个选项，便无法选择另一个选项）。

checkAnswer(chosenAnswer) {
    if (chosenAnswer == this.state.answer) {
        alert('You have chosen the correct answer!');
        alert('Click Next to continue');
        this.setState({
            disabled: false,
            optionEnabled: false,
      });
        //alert(this.state.answerDetails);
    } else {
        alert('You have selected the wrong answer');
    alert('Click Next to continue');
        this.setState({
            disabled: false, //this is for the next button
            optionEnabled: false, //this is for the options which are designed as buttons
      });
    }}

我有一个适当的机制，以便仅在选择一个选项后才能启用页面上的“下一步”按钮，并且正在尝试对这些选项执行类似的操作，但不确定为什么它不起作用。在渲染功能中，我有..

              <button 
                optionEnabled={this.state.optionEnabled}
                onClick={() => this.checkAnswer(this.state.options.indexOf(option))}>
                {option}
              </button></td>

进一步，我有..

   <button
    className="ui inverted button"
    disabled={this.state.disabled}
    onClick={this.nextQuestion}
    
    >Next
    </button>
    }
           {currentQuestion === 7 &&
<button
  className="ui inverted button"
  disabled={this.state.disabled}
  onClick={this.lastQuestion}
>Finish Challenge!
</button>

在代码的开头，我有..

constructor(props) {
super(props);
this.state = {
  currentQuestion: 0,
  userInput: null, // user has not answered a question yet at the start
  points: 0,
  options: [],
  quizzes: {},
  **disabled: true,** // Next button is disabled by default
  **optionEnabled: true,** //options should be enabled by default
};

这是我的lastQuestion函数：

 lastQuestion = () => {
 //alert(this.state.wrongAnswer);
 //alert(this.state.answerDetails);
 if (this.state.currentQuestion === 7) { 
   this.setState({
     gameOver: true,
     disabled: false,
   });
 }};

不确定为什么启用“下一步”按钮的功能正常，但不能激活选项。

任何帮助将不胜感激！或者，如果有人可以将我指向可以帮助我理解问题的资源

谢谢！

Answer 1

此

optionEnabled={this.state.optionEnabled}

应该是这个

disabled={!this.state.optionEnabled}

反应按钮布尔值？

1 个答案: