javascript - 验证是否在 React 中选择了每个 div 中的一个单选按钮

Question

我有一系列选择题。每个答案选项都实现为单选按钮。我想，当用户为测验中的每个问题选择一个答案/单选按钮以显示饼图时。

这就是我目前所拥有的（请注意大写，我使用的是 Emotion）

class Budget extends React.Component {
    state = {
      studentLoanPayment: 0,
      emergencyfund: 0,
      401k: 0
    };

    handleInputChange = event => {
        const { name, value } = event.target;
        console.log(name, value, event.target)

        this.setState({
          [name]: value,
          selected: event.target.id
        });
    };

    render() {
      const {
          studentLoanPayment,
          emergencyfund,
          401k
      } = this.state;


        return (
          <div>
              <UL>
                  <Li>
                      <h4>
                          How much money should Leif put towards student loans
                          each month?
                      </h4>
                  </Li>
                  <li>
                              <Label>
                                  <input
                                      id="q00"
                                      type="radio"
                                      name="studentLoanPayment"
                                      value="400"
                                      onChange={this.handleInputChange}
                                  />
                                  400
                                 {this.state.selected === "q00" && <DynamicText>hidden op1 text</DynamicText>}
                              </Label>
                  </li>
                  <li>
                              <Label>
                                  <input
                                      id="q01"
                                      type="radio"
                                      name="studentLoanPayment"
                                      value="500"
                                      onChange={this.handleInputChange}
                                  />
                                  500
                                  {this.state.selected === "q01" && <DynamicText>hidden op1 text</DynamicText>}
                              </Label>
                  </li>
                  <li>
                    <Label>
                      <input
                        id="q02"
                        type="radio"
                        name="studentLoanPayment"
                        value="200"
                        onChange={this.handleInputChange}>
                      </input>
                      200
                      {this.state.selected === "q02" && <DynamicText>hidden op1 text</DynamicText>}
                    </Label>
                 </li>
              </UL>
              <UL>
                  <li>
                      <h4>
                          How much money should Leif put towards an emergency fund?
                      </h4>
                  </li>
                  <li>
                              <Label>
                                  <input
                                      id = "q10"
                                      type="radio"
                                      name="emergencyfund"
                                      value="1,000"
                                      onChange={this.handleInputChange}
                                  />
                                  1,000
                                  {this.state.selected === "q10" && <DynamicText>hidden op1 text</DynamicText>}
                              </Label>
                  </li>
                  <li>
                              <label>
                                  <input
                                      id = "q11"
                                      type="radio"
                                      name="emergencyfund"
                                      value="200"
                                      onChange={this.handleInputChange}
                                  />
                                  200
                                  {this.state.selected === "q11" && <DynamicText>hidden op1 text</DynamicText>}
                              </label>
                  </li>
                  <li>
                  <Label>
                      <input
                        id = "q12"
                        type="radio"
                        name="emergencyfund"
                        value="0"
                        onChange={this.handleInputChange}/>
                      0
                      {this.state.selected === "q12" && <DynamicText>hidden op1 text</DynamicText>}
                    </Label>
                 </li>
              </UL>

              <UL>
                  <li>
                      <h2>
                          How much money should Leif put towards their 401(k)?
                      </h2>
                  </li>
                  <li>
                              <label>
                                  <input
                                      type="radio"
                                      name="401k"
                                      value="400"
                                      onChange={this.handleInputChange}
                                  >
                                  </input>
                              </label>
                  </li>
                  <li>
                              <label>
                                  <input
                                      type="radio"
                                      name="401k"
                                      value="500"
                                      onChange={this.handleInputChange}
                                  >
                                  </input>
                              </label>
                  </li>
                  <li>
                    <input
                      type="radio"
                      name="401k"
                      value="200"
                      onChange={this.handleInputChange}>
                    </input>
                 </li>
              </UL>

              <VictoryPie
                  colorScale="green"
                  data={[
                    {x: "Student Loans", y: this.state.studentLoanPayment},
                    {x: "Emergency Fund", y: this.state.emergencyfund}
                  ]}
                  labels={d => `${d.x}: ${d.y}%`}
                  style={{ parent: { maxWidth: '50%' } }}
              />
          </div>


        );
    }
}

有没有办法通过某个div（或在这种情况下为 a ul）中的所有单选按钮做出反应？这样我就可以遍历它们并确保选择了一个。然后可能会遍历ul文档中的所有 s（换句话说 - 遍历测验中的所有问题）

标签： javascriptreactjsradio-buttonemotion

Answer 1

是的，有办法做到这一点。如果你要构建你的数据，你会更容易。

例如，您可以执行以下操作：

const data = {
  questions: [
    {
      id: 'q00',
      accessor: 'studentLoanPayment',
      value: 400,
    },
    {
      id: 'q01',
      accessor: 'studentLoanPayment',
      value: 500,
    },
    {
      id: 'q10',
      accessor: 'emergencyFund',
      value: 1000,
    },
    {
      id: 'q11',
      accessor: 'emergencyFund',
      value: 200,
    },
    {
      id: 'q20',
      accessor: '401k',
      value: 500,
    },
  ],
  selectedQuestions: {},
};

当然，数据应该处于您的状态（例如，您从某个 api 获取数据并将其加载到 componentDidMount）。然后映射它们并根据需要显示它们。

请注意，您应该使用selectedQuestions来填写用户根据他们选择的问题accessor。例如，

- How much money should Leif put towards student loans
                          each month?
User selects q01 => your: 
data = {
   questions: [...],
   selectedQuestions: { q01: true }
}

等等。希望有帮助！