如何获取动态渲染输入的值和更新状态？

Question

我正在尝试构建一个动态呈现问题输入和回答的测验表单，或者选择＆＃39;投入。我有很好的输入渲染。我现在的问题是如何获取每个单独的输入值并更新qtext数组中相应的""属性和选项options。我的州看起来像这样。

[{ qtext : "", options: [""] , answer: "" }]

我已将方法handleQuestionText和handleAnswerText添加到我的父组件并将其传递下来，以便相应的组件可以访问它们。通过执行以下操作，我可以访问我认为的文本。但不知道该怎么办。

handleAnswerText: function(event, index) {
    var questions = this.state.questions,
    question = questions[index];
    var option = question.options[index];

    // Do something
},
handleQuestionText: function(event, index) {
    var questions = this.state.questions,
    question = questions[index];
    var qtext = question.qtext;

    // Do something
},

整个代码如下。感谢您的帮助！

// Parent Component 

import React from 'react';
import Question from './Question';
import firebase from 'firebase';

const QuizBuilderForm = React.createClass({
    getInitialState: function() {
        return {
            questions: []
        };
    },
    addQuestion: function(id) {
        var questions = this.state.questions; 
        questions.push({ qtext : "", options: [""] , answer: "" });
        this.setState({
            questions: questions
        });
    },
    addOption: function(index) {
        var questions = this.state.questions,
        question = questions[index];
        question = Object.assign({}, question, {options: question.options.concat('')}); // Study
        questions = questions
            .slice(0, index)
            .concat([question])
            .concat(questions.slice(index + 1));
        this.setState({
            questions: questions
        });
    },
    handleSubmit: function(event) {
        event.preventDefault();
        this.firebaseRef = firebase.database().ref('quizzes');
        this.firebaseRef.push({
            question: this.state.questions
        });
        this.refs.form.reset();
        this.setState({
            question: [{ qtext : "", options:[""], answer: ""}]
        });
    },
    getAnswer: function(index) {
        // Do something
    },
    handleAnswerText: function(event, index) {
        var questions = this.state.questions,
        question = questions[index];
        var option = question.options[index];

        // Do something
    },
    handleQuestionText: function(event, index) {
        var questions = this.state.questions,
        question = questions[index];
        var qtext = question.qtext;

        // Do something
    },
    componentDidMount: function(index) {
        this.addQuestion();
    },
    render: function() {
        var questions = this.state.questions.map((question, index) => <Question key={index} index={index} ref={'Question: ' + index} question={question} addOption={this.addOption} getAnswer={this.getAnswer} handleAnswerText={this.handleAnswerText} handleQuestionText={this.handleQuestionText} {...this.props}/>);
        return (
            <form className="quiz-form" onSubmit={this.handleSubmit} ref="form">
                {questions}
                <button type="button" className="add-question" onClick={this.addQuestion} disabled={this.state.questions.length === 5}>{this.state.questions.length < 5 ? 'Add another question' : 'Question limit reached!'}</button>
                <button type="submit">Create Quiz</button>
            </form>      
        );
    }
});

export default QuizBuilderForm;


// Question Component 

import React from 'react';
import Option from './Option';

const Question = React.createClass({
    addOption: function() {
        this.props.addOption(this.props.index);
    },
    handleQuestionText: function() {
        // Code
        this.props.handleQuestionText(this.props.index);
    },
    render: function() {
        var options = this.props.question['options'].map((option, index) => <Option key={index} index={index} option={option} {...this.props}/>);
        return (
            <div className="question">
                <input type="text" value="" onChange={this.handleQuestionText}></input>
                {options}
                <button type="button" onClick={this.addOption}>Add another option</button>
            </div>
        );
    }
});

export default Question;

// Option Component 

import React from 'react';

const Option = React.createClass({
    handleAnswerText: function() {
        this.props.handleAnswerText();
    },
    getAnswer: function() {
        // Some code
    },
    render: function() {
       return (
            <div>
                <input type="text" value="" placeholder="Enter an answer here" onChange={this.handleAnswerText}/>
                <input type="checkbox" ref="answer" onChange={this.getAnswer}/> 
            </div>
        );
    }
});

export default Option;