如何从用户通过单选按钮选择的前端反应向后端提交值？

如何解决如何从用户通过单选按钮选择的前端反应向后端提交值？

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

 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"]
}

解决方法

你应该在 state 中 init 回答空数组，然后在选项上 onChange 方法，将每个值推送到数组中。

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

class Example {

    this.state = {answers: []}

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

}