如何从用户通过单选按钮选择的前端（反应）将值提交到后端？答案

【问题标题】：How can I submit the values to backend from frontend(react) selected by the user through radio buttons?如何从用户通过单选按钮选择的前端（反应）将值提交到后端？
【发布时间】：2021-05-06 19:36:08
【问题描述】：

这里我将值传递给组件以呈现从后端获取的值

 render() {
    const questions = this.state.questions.map((question) => {
      return (
        <UserTestCard
          questions={question.question}
          optionA={question.options[0].A}
          optionB={question.options[0].B}
          optionC={question.options[0].C}
          optionD={question.options[0].D}
          marks={question.marks}
        />
      );
    });
    return (
      <div>
        <Jumbotron className="test-details">
          <h4 className="display-3 test-name">
            Name : {this.state.details.name}
          </h4>
          <h4 className="test-status">Status : {this.state.details.status}</h4>
          <h4 className="test-status">
            Subject : {this.state.details.subject}
          </h4>
          <p className="test-id">ID : {this.state.details._id}</p>
        </Jumbotron>
        <form onSubmit={this.formSubmit}>
          {questions}
          <Button>Submit</Button>
        </form>
      </div>
    );

在这里我渲染了从上述组件获得的所有值，但我无法通过单击的单选按钮向后端发布请求

return (
      <form>
        <p>Question:{this.props.questions}</p>
        <div className="radio">
          <label>
            <input
              type="radio"
              value={this.props.optionA}
              checked={this.state.selectedOption === this.props.optionA}
              onChange={this.onValueChange}
            />
            A: {this.props.optionA}
          </label>
        </div>

这就是我应该如何发布到后端

{   
    "email":"a@a.com",
    "answers":["A","B","A"]
}

【问题讨论】：

["A","B","A"] 用户如何选择相同的收音机（A) 两次？您在this.formSubmit 方法中是否已有这种格式的数据？
实际上在这个数组中它是三个问题的答案，用户将从 4 个选项 ["A","B","C","D"] 中选择，然后在选择三个收音机后来自 4 个问题的按钮用户将以 ["A","B","A"] 这种格式提交数据。
Imo 对于多项选择答案，您应该使用复选框。您也可以使用fetch 将数据发送到后端

标签： node.js reactjs frontend backend mern

【解决方案1】：

你应该在状态中初始化回答空数组，然后在选项上的 onChange 方法，将每个值推送到数组。

考虑到您正在使用类组件：

class Example {

    this.state = {answers: []}

    onValueChange(e) {
        let answers = this.state.answers;
        answers.push(e.target.value)
        this.setState({answers});
    }

}

【讨论】：

是的，我们必须像这样发布答案，但我想知道从单选按钮中获取该值
@Shuvam，您需要在单选按钮 onChange 上调用此方法 onValueChange；像这样：code code if该选项已被选中，通过此：{this.state.selectedOption === this.props.optionA}，安装组件时推送所有正确答案