在反应测验中设置子组件的数组状态并将其传递回父组件时遇到问题

Question

我是一名学生，我的项目之一是测验。我从后端获取问题，在 QuizContainer 中执行 componentDidMount，然后将每个问题作为道具传递给 QuizForm。在 QuizForm 中，每个问题都有 5 个单选按钮，代表从非常不同意到非常同意的范围。当我在子 (QuizForm) 组件中设置 setState 时，它​​只注册最后一个 onClick 事件，并且只将其发送给父级。我认为它可能会将每个问题都呈现为它自己的 QuizForm，但我不确定如何在父级内部收集所有这些数据（也许作为父级的状态，但我不确定我会怎么做那个）。

下面是代码供参考：

QuizContainer

state = {
        all: []
    }

    handleSubmit = (evt, quizObj) => {
        evt.preventDefault()
        this.setState = {
            all: [...this.state.all, quizObj]
        }
    }

 render() {
        return (
            <container className="quiz">
            <h5>For each of the following statements choose on a scale of 1 - 5, one strongly disagree and 5 being strongly agree, and 3 being neutral. </h5>
                <div> {this.props.questions.questions.map(question => <QuizForm question={question} key={question.id} handleSubmit={this.handleSubmit}/>)}
                    <input form="quiz-form" type="submit" value="Submit" />
                </div> 
            </container>
        )
    }

QuizForm

state = {
        question: [],
        answer: []
    }

    handleChange = (evt) => {
        let name = evt.target.name
        let value = evt.target.value


            this.setState({
                questions: [...this.state.questions, name],
                answers: [...this.state.answers, value]
            })

    }



    render() {
        return (
            <form id="quiz-form" onSubmit={(evt) => this.props.handleSubmit(evt, this.state)}>
                <label htmlFor="question">{this.props.question.question}</label>
                <input onChange={this.handleChange}
                    type="radio"
                    name={this.props.question.id}
                    value={0}
                />
                <input onChange={this.handleChange}
                    type="radio"
                    name={this.props.question.id}
                    value={25}
                />

                </form>
        )
    }

Answer 1

您正在使用 map() 方法，它基本上循环数组，所以是的，它将每个问题呈现为不同的形式。您不应该将每个问题都以不同的形式，只需将它们全部包装成一个并从 QuizForm 中删除标签。

handleSubmit 也应该是提交表单到后端（或 w.e.）的方法，并创建另一个方法，如 handleChange 或其他方法，它接受参数并设置状态。

handleChange(questionName, selectedAnswer){
   this.setState({...answers, {questionName, selected: selectedAnswer}})
}

这样您可以保留问题的名称（id 或类似的名称会更好）和选择的答案并将其作为道具传递给您的 QuizForm（也需要重命名为类似 Question 的名称）并检查收音机是否匹配 selectedAnswer支柱。

您当前的 QuizForm 组件应该是这样的（也应该是函数式组件，而不是类）

             const radioButtons = [{id: 'first', value: 1}, id:'second', value: 2];
              function Question({selectedAnswer, question, name, id}){
                 return (
                    <>
                   <label htmlFor={id}>{question}</label>
                   {radioButtons.map(({id: btnId, value}) => 
                      {<input type="radio" id={id.concat(btnId)} 
                        {selectedAnswer === value ? checked : null}
                        name={name} value={value} />})}
                  </>
               );
            }

在此示例中，您必须传递问题 id、名称、selectedAnswer 和问题以显示所有内容正确。 id 将用于标签，因为它指的是元素 id，它在每个页面中必须是唯一的。