Question

我正在开发一个小型Web应用程序，并且一直坚持从我创建的答案类中获取答案数据。

总而言之，我有一个createQuiz类，在这里我处理问题数据的输入，并且我有一个answerOptions状态数组来收集所有答案，但是我创建了另一个组件答案以具有答案的状态和当我修改它们时，答案选项不会更新。这是答案类的代码：

pieSeries.slices.template.tooltipText = {value} {category} {total_sales};

这是创建测验类的代码：

import React, {Component} from 'react';
import createQuiz from './CreateQuiz'



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

        this.handleInputChange = this.handleInputChange.bind(this);
        this.onChangeAnswerValidity = this.onChangeAnswerValidity.bind(this);
        this.ChangeValidityState = this.ChangeValidityState.bind(this);

        this.state = {       
            answerText : '',
            answerValidity : false
        }
    }

    getCurrentState(){
        return (this.state)
    }


    handleInputChange(event) {

        this.setState({
            answerText : event.target.value
        })
      }

    onChangeAnswerValidity(event){
    this.setState({
        answerValidity : !event.target.value
    })
    }

    ChangeValidityState(event){
        this.setState({
            answerValidity : !event.target.value
        })
    }

    render() {
        return (
            <div>
                <input  type="text"
                        className="form-control"
                        value={this.state.answerText}
                        onChange={this.handleInputChange}
                        />
                        <input  type="radio"
                        className="form-control"
                        value={this.state.answerValidity}
                        checked={this.state.answerValidity}
                        onChange={this.onChangeAnswerValidity}
                        />
            </div>
        )
    }

}

当我将数据发送到数据库时，我总是在答案字段中有空字符串，而false则没有更新。

非常感谢， Boubker ELAMRI

Answer 1

您正在修改列表，因此反应不知道它已更改。您需要先设置一个新数组，然后再设置状态

const list = Array.from(this.state.answerOptions)
list.push(newAnswer)

在另一个组件中使用组件状态react js

1 个答案: