提供动态ID和React中多个行中存在的单选按钮的值

问题描述

    constructor(props) {
    super(props);
    this.state = {
      buttondisabled: true,radio: 0,cards: [],};
    this.submitHandler = this.submitHandler.bind(this);
  }

  componentDidMount = () => {
    this.setState({
      cards: this.props.data.matrix,});
    console.log("matrix",this.props.data.matrix);
  };

  submitHandler = (event) => {
    event.preventDefault();
    console.log("button clicked",this.state);
    this.setState({
      buttondisabled: false,});
  };

  changeRadioHandler = (event) => {
    this.setState({
      buttondisabled: false,radio: event.target.value,});
    console.log("checked",event.target.value);
  };

  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,i) => (
              <div class="rows">
                <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={i}
                        name={questions.text}
                        onChange={this.changeRadioHandler}
                        required
                      ></input>
                      <label htmlFor={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.buttondisabled}
            onClick={this.submitHandler}
          >
            Submit
          </button>
        </div>
      </div>
    );
  }

假设我们连续有10个单选按钮，用户可以单击单选按钮上的任何一个，同样，每行有10个单选按钮，因此有10行（例如）。来自数据库的数据随单选按钮标签值的数量而变化。我只能从第一行中选择一个单选按钮，而不能从所有行中至少选择一个单选按钮。如何动态地做出反应？

解决方法

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

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

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