ReactJS ссылается на те же компоненты в форме

Я работаю над созданием приложения Multiple Choice 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 /> у меня есть поля ввода. Как я могу получить значения входных данных в каждом из компонентов вопроса после onSubmit?


reactjs components ref
person sAs59    schedule 28.01.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

Например:

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

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

person fivebillionmph    schedule 29.01.2017
comment
Он работает только для компонента. У меня несколько компонентов Вопроса. Как я могу получить значения от каждого из них? - person sAs59; 29.01.2017

arrow_upward
0
arrow_downward

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

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