在 React 中通过多个表单字段添加数组元素

Question

我正在开发一个测验应用项目来学习如何做出反应。我遇到了一种情况，我需要将不正确的选项存储在数组中的测验问题中。然后将信息传递给数据库。 这是一个示例 JSON 格式。

{       
        incorrect_answers:["Jeff Bezos","Satya Nadela","Bill Gates"] }

不正确的答案是一个数组，需要通过单独的文本框为每个不正确的选项输入值，就像这样。 option input form

我被卡住的部分是将它们附加到数组中，这是我的尝试。

export default class CreateQuiz extends Component{
constructor(props){
    super(props);
   
          this.onChangedIncorrectAnswer=this.onChangedIncorrectAnswer.bind(this);
    this.onSubmit=this.onSubmit.bind(this);

    this.state={
        incorrect_answers:[]
    } 
    
    
}

onChangedIncorrectAnswer(e){
    const option=e.target.value
    this.setState({
        incorrect_answers:[...this.state.incorrect_answers,option]
    });
}


onSubmit(e){
    e.preventDefault();

    const quiz = {
        incorrect_answers:this.state.incorrect_answers
    }

    console.log(quiz);
    axios.post("http://localhost:3000/quizes",quiz)
    .then(res=>console.log(res.data));
    window.location='/quiz-list';
}

render(){
    return (
        <div>
            <h3>Create New Quiz</h3>
            <form onSubmit={this.onSubmit}>
           
                <div className="form-group">
                    <label>Incorrect Option 1</label>
                    <input type="text"
                        required
                        className="form-control"
                        value={this.state.incorrect_answers[0]}
                        onChange={this.onChangedIncorrectAnswer}
                        />
                </div>

                <div className="form-group">
                    <label>Incorrect Option 2</label>
                    <input type="text"
                        required
                        className="form-control"
                        value={this.state.incorrect_answers[1]}
                        onChange={this.onChangedIncorrectAnswer}
                        />
                </div>

                <div className="form-group">
                    <label>Incorrect Option 3</label>
                    <input type="text"
                        required
                        className="form-control"
                        value={this.state.incorrect_answers[2]}
                        onChange={this.onChangedIncorrectAnswer}
                        />
                </div>

            
                <div className="form-group">
                    <input type="submit" value="Submit Quiz" className="btn btn-primary"/>
                </div>

            </form>
        </div>
    )
}

}

但是表单没有按预期工作。当我在“选项 1”文本框中输入第一个选项的内容时，只有第一个字符存储在“选项 2”中，以此类推。

Answer 1

试试这个，这会奏效！！

export default class CreateQuiz extends Component {
constructor(props) {
super(props);

this.onChangedCorrectAnswer = this.onChangedCorrectAnswer.bind(this);
this.onChangedIncorrectAnswer = this.onChangedIncorrectAnswer.bind(this);
this.onSubmit = this.onSubmit.bind(this);

this.state = {
  category: "",
  correct_answer: "",
  difficulty: "",
  type: "",
  question: "",
  incorrect_answers: ["", "", ""]
  };
}

 onChangedCorrectAnswer(e) {
   this.setState({
  correct_answer: e.target.value
  });
 }

 onChangedIncorrectAnswer(e, index) {
  const option = e.target.value;
  const { incorrect_answers } = this.state;
  incorrect_answers[index] = option;
 this.setState({
  incorrect_answers
 });
}

onSubmit(e) {
  e.preventDefault();

const quiz = {
  category: this.state.category,
  correct_answer: this.state.correct_answer,
  incorrect_answers: this.state.incorrect_answers,
  difficulty: this.state.difficulty,
  type: this.state.type,
  question: this.state.question
};

console.log(quiz);
axios
  .post("http://localhost:3000/quizes", quiz)
  .then((res) => console.log(res.data));
window.location = "/quiz-list";
}

render() {
  return (
  <div>
    <h3>Create New Quiz</h3>
    <form onSubmit={this.onSubmit}>
      <div className="form-group">
        <label>Correct Answer</label>
        <input
          type="text"
          required
          className="form-control"
          value={this.state.correct_answer}
          onChange={this.onChangedCorrectAnswer}
        />
      </div>

      <div className="form-group">
        <label>Incorrect Option 1</label>
        <input
          type="text"
          required
          className="form-control"
          value={this.state.incorrect_answers[0]}
          onChange={(e) => this.onChangedIncorrectAnswer(e, 0)}
        />
      </div>

      <div className="form-group">
        <label>Incorrect Option 2</label>
        <input
          type="text"
          required
          className="form-control"
          value={this.state.incorrect_answers[1]}
          onChange={(e) => this.onChangedIncorrectAnswer(e, 1)}
        />
      </div>

      <div className="form-group">
        <label>Incorrect Option 3</label>
        <input
          type="text"
          required
          className="form-control"
          value={this.state.incorrect_answers[2]}
          onChange={(e) => this.onChangedIncorrectAnswer(e, 2)}
        />
      </div>

      <div className="form-group">
        <input
          type="submit"
          value="Submit Quiz"
          className="btn btn-primary"
        />
      </div>
    </form>
  </div>
);

} }

Answer 2

您的数组状态仅被视为一种状态 当用户对输入进行任何更改时，您为什么不在旅途中创建状态。

创建一个状态对象，如

this.state = {incorrect_answers: {}}

在你的 onChangedIncorrectAnswer 中

onChangedIncorrectAnswer(e){
    const option=e.target.value;
    const stateName = e.target.name;
    this.setState({
        incorrect_answers: {...this.state.incorrect_answers, [stateName]: option }
    });
}

使用您的表单元素作为添加名称作为唯一名称，该名称将用作状态

<div className="form-group">
    <label>Incorrect Option 1</label>
    <input name="incorrect_answers_0" type="text" required className="form-control" value={this.state.incorrect_answers[incorrect_answers_0]}
        onChange={this.onChangedIncorrectAnswer} />
</div>

保存时使用该对象

onSubmit(e){
    let yourIncorrectAnswers = Object.values(this.state.incorrect_answers);
  })
    

}