在 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

您的阵列状态仅被视为一种状态为什么不在用户对输入进行任何更改时即时创建状态。

创建状态对象，例如

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

}

Answer 2

试试这个，这会起作用！！

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

} }

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

Adding array elements through multiple form fields in React

javascript

arrays

reactjs

forms

react-state-management