Question

我正致力于在ReactJS上构建Multiple Choice Quiz应用。用户应该做的第一件事就是用问题和答案填写表格并提交（例如在Google表格上）。

<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之后获取每个Question组件中的输入值？

Answer 1

在问题组件中，您可以添加返回所需值的函数。

例如：

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

然后只需从handleSubmit函数中的问题组件调用getInputValue函数。

Answer 2

我解决了将它们存储到数组中的问题

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

ReactJS在表单中引用相同的组件

2 个答案: