Question

我需要一些关于将单选按钮检查值存储到数组中的帮助，我试过但我无法使任何工作，这是我的代码所以我想将已检查的单选按钮传输并存储到一个数组中我不知道该怎么做..

我的代码：

class Question extends Component {
  constructor() {
    super();
    this.state = { val: "" };
    this.onInput = this.onInput.bind(this);
  }
  //this.setState = {answers: {}};
  onInput(e) {
    this.setState({ val: e.target.value });
    console.log(this.state.data);
  }
  render() {
    var that = this; // Funny way to be able to access this from inside our iterator() function below.
    var iterator = this.props.questionChoices.map((choice, i) => {
      return (
        <div>
          <label className="container">
            <input
              className="input"
              key={i}
              type={that.props.questionType}
              name={that.props.questionID}
              value={choice}
              onChange={that.onInput}
            />
            &nbsp; {choice}
            <span className="checkmark" />
          </label>
        </div>
      );
    });
    return (
      <div className="row">
        <div className="form">
          <Paper zDepth={1}>
            <div className="h3">
              <h3 className="h3outter">
                {this.props.questionID} - {this.props.questionText}
              </h3>
              <p className="h3inner">{iterator}</p>
            </div>
          </Paper>
        </div>
      </div>
    );
  }
}

Answer 1

行。所以我稍微调整了你的代码并提出了这个问题。在render中，它会迭代问题，但是（你丢失的那个位）也会迭代单选按钮选项。

重要的部分是onInput，我们在其中采用现有状态并为其添加新的单选按钮值。如果问题已经得到解答，我们会删除现有的答案，并将其替换为新答案。

class Question extends React.Component {

  constructor() {
    super();
    this.state = { values: [] };
    this.onInput = this.onInput.bind(this);
    this.buildRadioButtons = this.buildRadioButtons.bind(this);
  }

  onInput(e) {
    const id = e.target.name;
    const answer = { id, answer: e.target.value };
    let answers;
    if (this.state.answers.some(answer => answer.id === id)) {
      answers = [...this.state.answers.filter(answer => answer.id !== id), answer];
    } else {
      answers = [...this.state.answers, answer];
    }
    this.setState({ answers }, () => console.log(this.state.answers));
  }

  buildRadioButtons(arr, type, id) {
    return arr.map((choice, i) => {
      return (
        <div key={i}>
          <input
          type={type}
          name={id}
          value={choice}
          onChange={this.onInput}
        />          
        <label>{choice}</label>
      </div>
     )
  })
 }

  render() {
    var iterator = this.props.questionChoices.map((question, i) => {
      const { choices, questionType, questionID, questionText } = question;
      return (
        <div key={i}>
          <h3>{questionText}</h3>
          {this.buildRadioButtons(choices, questionType, questionID)}
        </div>
      );
    });
    return (
      <div className="row">
        <div className="form">
          <div >
            <div className="h3">
              {iterator}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const questionChoices = [
  { "questionID": 3, "questionType": "radio", "questionText": "L'unité du courant électrique est", "choices": ["L’Ampère", "Le Volt", "Le Watt"], "answer": "L’Ampère" },
    { "questionID": 2, "questionType": "radio", "questionText": "What is your name?", "choices": ["Dave", "Nizar", "Bob"], "answer": "Nizar" }
]

ReactDOM.render(
  <Question questionChoices={questionChoices} />,
  document.getElementById('container')
);

<强> Here's a working copy

React JS - 将单选按钮值存储到数组中

1 个答案: