将单选按钮上的索引的布尔值更改为true，请点击react

问题描述

我正在处理多行可用的多个单选按钮，我们只能从每一行中选择一个单选按钮。如果我们从任何行中单击第一个单选按钮，则仅对于选定的单选按钮索引值，布尔值应更改为true，而对于未选定的单选按钮，该值应保持不变。

constructor(props) {
    super(props);
    console.log(this.props);
    this.state = {
      btnDisabled: true,questions: [],};
    this.changeRadioHandler = this.changeRadioHandler.bind(this);
    this.submitHandler = this.submitHandler.bind(this);
  }

  changeRadioHandler = (event) => {
    const qn = event.target.name;
    let text = this.props.data.matrix.options;
    let userAnswer = [];
    for (let j = 0; j < text.length; j++) {
      userAnswer.push(false);
    }
    const options = text.map((t,index) => ({
      text: t.text,userAnswer: userAnswer[index],}));
    console.log(options);
    const question = {
      id: event.target.value,qn,options,};
    if (this.state.questions.some((question) => question.qn === qn)) {
      questions = [
        ...this.state.questions.filter((question) => question.qn !== qn),question,];
      console.log("if loop",questions);
    } else {
      questions = [...this.state.questions,question];
    }
    this.setState({ questions });
    console.log(questions);
    if (questions.length === 10) {
      this.setState({
        btnDisabled: false,});
    }
  };

  submitHandler = () => {
    //event.preventDefault();
    console.log("btn clkd",questions);
  };

  render() {
    return (
      <div class="matrix-bd">
        {this.props.data.header_text && (
          <div class="header-qn">
            <h5>{this.props.data.header_text} </h5>
          </div>
        )}
        {this.props.data.matrix && (
          <div class="grid">
            {this.props.data.matrix.option_questions.map((questions,j) => {
              return (
                <div class="rows" key={j}>
                  <div class="cell main">{questions.text}</div>
                  {this.props.data.matrix.options.map((element,i) => {
                    return (
                      <div class="cell" key={i}>
                        <input
                          type="radio"
                          id={"rad" + j + i}
                          name={questions.text}
                          value={element.text}
                          onChange={this.changeRadioHandler}
                        ></input>
                        <label htmlFor={"rad" + j + i}>{element.text}</label>
                      </div>
                    );
                  })}
                </div>
              );
            })}
          </div>
        )}
        <div class="buttonsubmit text-right">
          <button
            type="button"
            id="QstnSubmit"
            name="QstnSubmit"
            class="btn btn-primary"
            disabled={this.state.btnDisabled}
            onClick={this.submitHandler}
          >
            {this.props.labels.LBLSUBMIT}
          </button>
        </div>
      </div>
    );
  }

我的json对象看起来像这样...

id: "1"
options: Array(10)
0: {text: "1",userAnswer: false}
1: {text: "2",userAnswer: false}
2: {text: "3",userAnswer: false}
3: {text: "4",userAnswer: false}
4: {text: "5",userAnswer: false}
5: {text: "6",userAnswer: false}
6: {text: "7",userAnswer: false}
7: {text: "8",userAnswer: false}
8: {text: "9",userAnswer: false}
9: {text: "10",userAnswer: false}
length: 10
__proto__: Array(0)
qn: "question"

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）