javascript - 使用 const 替换数组中的元素值并让反应

Question

我有 10 个单选按钮，我只能选择一个。选择单选按钮时，布尔值相对于其 id 值从 false 更改为 true。

如果用户更改了选定的值，那么布尔数组的特定索引值必须更改为 true，通过将先前选定的值更改为 false，同样它继续......

如何在反应中做到这一点？

 let questions;

class App extends Component {
  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 = () => {    
    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>
    );
  }
}

export default App;

我的对象数组是这样的......

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

Answer 1

changeRadioHandler = (event) => {
    const qn = event.target.name;
    const id = event.target.value;
    let text = this.props.data.matrix.options;
    let userAnswer = [];
    for (let j = 0; j < text.length; j++) {
      userAnswer.push(false);
    }
    const option = text.map((t, index) => ({
      text: t.text,
      userAnswer: userAnswer[index],
    }));
    const elIndex = option.findIndex((element, i) => element.text === id);
    let options = [...option];
    options[elIndex] = {
      ...options[elIndex],
      userAnswer: true,
    };
    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,
      ];
    } else {
      questions = [...this.state.questions, question];
    }
    this.setState({ questions });
    console.log(questions);
    if (questions.length === 10) {
      this.setState({
        btnDisabled: false,
      });
    }
  };