ReactJS refと同じ形式のコンポーネント

Question

私はReactJS上に複数の選択肢のクイズアプリケーションを作成しています。 最初にユーザーが行うべきことは、フォームに質問と回答を記入して提出することです（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の後に各質問コンポーネントの入力値を取得するにはどうすればよいですか？

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} /> 
    ))}