ReactJS ref аналогичные компоненты в форме

Question

Я работаю над созданием приложения Quiz для нескольких вариантов на ReactJS. Первое, что должен сделать пользователь, - заполнить форму вопросами и ответами и отправить (например, в Google Forms).

<form className="ui form" onSubmit={this.handleSubmit}> 
    {questions.map((question, i) => (
    <Question key={i} 
       ref={q => this.questionComp = q} 
       number={i} 
       choices={question.choices} /> 
))} 

    <Button type="submit" primary fluid>Submit</Button> 
</form> 

<Question /> У меня есть поля ввода. Как я могу получить значения входов в каждом компоненте Question после onSubmit?

Answer 1

В компоненте «Вопрос» вы можете добавить функции, которые возвращают нужные вам значения.

Например:

class Question extends React.Component { 
    getInputValue() { 
     return this.textInput.value; 
    } 
    render() { 
     return (<input ref={(input) => { this.textInput = input; }}); 
    } 
} 

Тогда просто вызовите функцию getInputValue из компонента вопроса в функции handleSubmit.

Answer 2

Я решил, что хранить их в массив

{questions.map((question, i) => (
     <Question key={i} 
        ref={q => this.questionsArray[i] = q} 
        number={i} 
        choices={question.choices} 
        clickAddQuestion={this.addQuestion} /> 
    ))}