選択したフィールド内で動的オプションを使用して反応する

Question

次の課題をReactJSで解決しようとしています。質問と回答のフィールドがいくつかあるとしましょう。私は、ページ上のすべての回答の間に10ポイントを配分することを可能にしたいと考えています。

私は、現在のユーザーの入力状態に応じて、<option>タグで動的に入力されているいくつかのフィールドを含むフォームを作成しました。

ユーザーが値を選択すると、再びゼロにリセットされるという問題があります。 は、ここでのコード例を参照し、いくつかの値を選択してみてください： https://jsfiddle.net/jcpyqf9v/1/

Answer 1

あなたの問題は、ここでは、あなたの選択のオプションを移入によって引き起こされている：

let optionNodes = []; 
for (let k = 0; k < 11 - pointsSum; k++) { 
    optionNodes.push(<option key={k} value={k}>{k}</option>); 
} 

あなたはサブセットのみをoutputingしているのでオプションのうち、選択されたオプションがリストにない場合、選択フィールドにはデフォルトを出力するしかありません。 0。

代わりにこれを試してください。

let optionNodes = []; 
for (let k = 0; k < 11 - pointsSum || k <= this.state.answers[i]; k++) { 
    optionNodes.push(<option key={k} value={k}>{k}</option>); 
}