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

问题描述

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

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

错误答案是一个数组，并且对于每个不正确的选项，都需要通过单独的文本框输入该值，如下所示。 {{3}}

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

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”中，依此类推。

解决方法

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

创建一个状态对象，例如

export { Boxshape.isdown }

在您的onChangedIncorrectAnswer

this.state = {incorrect_answers: {}}

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

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>

,

尝试一下，这将起作用！

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>
);

} }