Javascript 如何在react js for Quike中单击时禁用按钮

当我在我的测验中选择一个

选项时，我想禁用我单击的
按钮
，而其余的测验选项都已启用…关于如何为这些
选项执行此操作，有什么想法吗？我知道我们必须使用
disabled={pass a function}
，但不知道如何与
选项配合使用

这是我的测验。js：

render() {
    const { userAns, options, scores, currentQuest } = this.state;

    return (
      <div>
        <div>
          <ProgressBar animated now={this.state.currentQuest * 10} />
        </div>{" "}
        {this.state.questions}
        <br></br> {this.state.scores}
        <br></br>
        <p style={{ textAlign: "center" }}>Q{this.state.currentQuest}</p>
        {this.state.pictures}
        <br></br>
        {options.map((option, id) => (
          <Button
            size="lg"
            block
            key={id}
            className={`ui floating message options
      ${userAns === option ? "selected" : null}
     `}
            onClick={() => this.checkAns(option)}
          >
            {option}
          </Button>
        ))}
        <div className="hrLine"></div>
        <br></br>
        <Button onClick={() => this.checkAns()}>CHECK</Button>
        {currentQuest < Quizdata.length - 1 && (
          <Button
            disabled={this.state.disabled}
            onClick={() => {
              this.nextQuestion();
            }}
          >
            NEXT
          </Button>
        )}
        <br></br>
        {currentQuest === Quizdata.length - 1 && (
          <Button
            onClick={() => {
              this.finishQuiz();

            }}
          >
            Finish
          </Button>
        )}
      </div>
    );
  }

render（）{
const{userAns，options，scores，currentQuest}=this.state；
返回(
{" "}
{this.state.questions}


{this.state.scores}



Q{this.state.currentQuest}
{this.state.pictures}



{options.map（（option，id）=>(
this.checkAns（选项）}
>
{option}
))}



this.checkAns（）}>CHECK
{currentQuest
下一个
)}



{currentQuest===Quizdata.length-1&&(
{
this.finishquick（）；
}}
>
完成
)}
);
}
您不需要将函数传递给禁用的
属性，这是一个“布尔”值，现在您必须跟踪已单击的选项

我假设您有一个选项数组，因此首先需要将其转换为对象对象，以便您可以使用唯一键访问任何选项：

const options = {
 0:{
    isSelected: false,
    value: 'your value 0',
 },
 1:{
    isSelected: false,
    value: 'your value 1',
 },
 2:{
    isSelected: false,
    value: 'your value 2',
 };
}

这样，您就可以跟踪每个选项和当前状态

在进行此更改时，您的代码必须在此处稍作更改，您需要通过对象的键以这种方式访问选项
options[optionKey]

我使用了
Object.keys
，它创建了一个你传递给它的对象的键数组，然后你在数组中迭代，并用选项映射键对象是引用此方法的文档，如果你从未使用过它：

Object.keys(options).map((optionKey, id) => (
          <Button
            size="lg"
            block
            disabled={ options[optionKey].isSelected } 
            key={optionKey}
            className={`ui floating message options
      ${userAns === options[optionKey] ? "selected" : null}
     `}
            onClick={() => this.checkAns(options[optionKey])}
          >
            {options[optionKey].value}
          </Button>
   ))}

Object.keys（options）.map（（optionKey，id）=>(
this.checkAns（options[optionKey]）}
>
{options[optionKey].value}
))}
从“React”导入React，{Component}；
从“/questions”导入{Quizdata}”；
//从“react icons/fa”导入{FaHorse，FaArrowR}；
从“react bootstrap”导入{Button，ProgressBar}；
类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
isMounted:错，
残疾人士:错,，
userAns:null，
选项：{}，
当前任务：0，
分数：0，
图片：“，
正确：错误
};
}
componentDidMount（）{
这是loadquick（）；
//console.log（“Quiz1已加载”）；//在中加载测验1数据
}
componentDidUpdate（prevProps、prevState）{
const{currentQuest}=this.state；
if（this.state.currentQuest！==prevState.currentQuest）{
这是我的国家({
残疾人:对,，
问题：Quizdata[currentQuest]。问题，
选项：Quizdata[currentQuest]。选项，
回答：Quizdata[currentQuest]。回答，
图片：Quizdata[currentQuest]。图片
});
}
}
loadquick=（）=>{
const{currentQuest}=this.state；
//console.log（“QD”，Quizdata）；
此.setState（（）=>{
返回{
是的，
问题：Quizdata[currentQuest]。问题，
选项：Quizdata[currentQuest]。选项，
回答：Quizdata[currentQuest]。回答，
图片：Quizdata[currentQuest]。图片
};
});
//console.log（this.state.answer）；
};
下一个问题=（）=>{
const{scores，answer，userAns}=this.state；
if（userAns==null）{
返回；
}
console.log（“分数”+this.state.scores）；
这是我的国家({
currentQuest:this.state.currentQuest+1
});
};
checkAns=答案=>{
//用户和应答切换
让newAnswers=this.state.options；
//日志（“NewAnsw”，newAnswers，answer）；
Object.keys（newAnswers.map）（optionKey=>{
newAnswers[optionKey].isSelected=false；
});
newAnswers[answer].isSelected=true；
这是我的国家({
userAns:newAnswers.value，
//选项：新答案，
禁用：false
});
log（“用户单击”+this.state.userAns）；
if（this.state.userAns===答案）{
控制台日志（“正确”）；
这是我的国家({
分数：this.state.scores+1
//正确：错误
});
}否则{
控制台日志（“错误”）；
this.setState（{scores:this.state.scores}）；
}
};
完成测验=（）=>{
const{scores，userAns，answer}=this.state；
if（this.state.currentQuest==Quizdata.length-1）{
if（userAns==答案）{
控制台日志（“正确”）；
这是我的国家({
分数：分数+1
//正确：错误
});
}否则{
控制台日志（“错误”）；
this.setState（{scores:scores}）；
}
console.log（“分数”+this.state.scores）；
}
};
render（）{
const{userAns，options，scores，currentQuest}=this.state；
//console.log（“Opts”，选项）；
如果（！this.state.isMounted）{
返回null；
}
返回(
{" "}
{this.state.questions}

{this.state.scores}


Q{this.state.currentQuest}
{this.state.pictures}


{/*{options.map（（option，id）=>(
this.checkAns（选项）}
>
{option}
))}
*/}
{Object.keys（options.map）（（optionKey，id）=>(
this.checkAns（optionKey）}
>
{options[optionKey].value}
))}


这个.ch
import React, { Component } from "react";
import { Quizdata } from "./questions";
//import { FaHorse, FaArrowR } from "react-icons/fa";
import { Button, ProgressBar } from "react-bootstrap";

class Quiz extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isMounted: false,
      disabled: false,
      userAns: null,
      options: {},
      currentQuest: 0,
      scores: 0,
      pictures: "",
      correct: false
    };
  }
  componentDidMount() {
    this.loadQuiz();
    // console.log("Quiz1 loaded"); //loads quiz 1 data in
  }
  componentDidUpdate(prevProps, prevState) {
    const { currentQuest } = this.state;

    if (this.state.currentQuest !== prevState.currentQuest) {
      this.setState({
        disabled: true,
        questions: Quizdata[currentQuest].question,
        options: Quizdata[currentQuest].options,
        answer: Quizdata[currentQuest].answer,
        pictures: Quizdata[currentQuest].picture
      });
    }
  }
  loadQuiz = () => {
    const { currentQuest } = this.state;
    //console.log("QD", Quizdata);
    this.setState(() => {
      return {
        isMounted: true,
        questions: Quizdata[currentQuest].question,
        options: Quizdata[currentQuest].options,
        answer: Quizdata[currentQuest].answer,
        pictures: Quizdata[currentQuest].picture
      };
    });
    //  console.log(this.state.answer);
  };

  nextQuestion = () => {
    const { scores, answer, userAns } = this.state;
    if (userAns === null) {
      return;
    }

    console.log("scores " + this.state.scores);
    this.setState({
      currentQuest: this.state.currentQuest + 1
    });
  };

  checkAns = answer => {
    //userans and answer switched
    let newAnswers = this.state.options;
    // console.log("NewAnsw", newAnswers, answer);
    Object.keys(newAnswers).map(optionKey => {
      newAnswers[optionKey].isSelected = false;

    });
    newAnswers[answer].isSelected = true;

    this.setState({
      userAns: newAnswers.value,
      //  options: newAnswers,
      disabled: false
    });

    console.log("user clicked " + this.state.userAns);
    if (this.state.userAns === answer) {
      console.log("Correct");

      this.setState({
        scores: this.state.scores + 1
        // correct: false
      });
    } else {
      console.log("wrong");
      this.setState({ scores: this.state.scores });
    }
  };
  finishQuiz = () => {
    const { scores, userAns, answer } = this.state;

    if (this.state.currentQuest === Quizdata.length - 1) {
      if (userAns === answer) {
        console.log("Correct");

        this.setState({
          scores: scores + 1
          // correct: false
        });
      } else {
        console.log("wrong");
        this.setState({ scores: scores });
      }
      console.log("scores " + this.state.scores);
    }
  };
  render() {
    const { userAns, options, scores, currentQuest } = this.state;
    // console.log("Opts", options);
    if (!this.state.isMounted) {
      return null;
    }
    return (
      <div>
        <div>
          <ProgressBar animated now={this.state.currentQuest * 10} />
        </div>{" "}
        {this.state.questions}
        <br /> {this.state.scores}
        <br />
        <p style={{ textAlign: "center" }}>Q{this.state.currentQuest}</p>
        {this.state.pictures}
        <br />
        {/*      {options.map((option, id) => (
          <Button
            size="lg"
            block
            key={id}
            className={`ui floating message options
      ${userAns === option ? "selected" : null}
     `}
            onClick={() => this.checkAns(option)}
          >
            {option}
          </Button>
        ))}
  */}
        {Object.keys(options).map((optionKey, id) => (
          <Button
            size="lg"
            block
            disabled={options[optionKey].isSelected}
            key={optionKey}
            className={`ui floating message options
      ${userAns === options[optionKey] ? "selected" : null}
     `}
            onClick={() => this.checkAns(optionKey)}
          >
            {options[optionKey].value}
          </Button>
        ))}
        <div className="hrLine" />
        <br />
        <Button onClick={() => this.checkAns()}>CHECK</Button>
        {currentQuest < Quizdata.length - 1 && (
          <Button
            disabled={this.state.disabled}
            onClick={() => {
              this.nextQuestion();
            }}
          >
            NEXT
          </Button>
        )}
        <br />
        {currentQuest === Quizdata.length - 1 && (
          <Button
            onClick={() => {
              this.finishQuiz();
              // this.nextQuestion();
              //   this.pushtoDB();
              //  this.props.handleDisableValue(scores); // child to parent
            }}
          >
            Finish
          </Button>
        )}
      </div>
    );
  }
}
export default Quiz;