入力値のプリセットとユーザーの変更を許可する

Question

私はReactをもう少し詳しく知っていますが、私は入力の問題に遭遇しました。

ユーザー入力に基づいて入力を生成しているので、1を選択すると2入力ボックス、2入力ボックスが返されます。 さらに、入力ボックスに計算された数値をあらかじめ入力したいと思います。のは、彼らがminとmaxの範囲

だとしましょうだから私はこのようなものを持っている：

minArr = []; 
maxArr = []; 
for (let i = 0; i < this.state.userSelectInputAmount; i++) { 
    minArr.push(this.calculateMin(item); 
    maxArr.push(this.calculateMax(item); 
} 
return Array(this.state.userSelectInputAmount).fill().map((_, i) => { 
    return (
     <div className="form-group"> 
     <label> 
      <input className="form-control" 
       placeholder="Minimum Range" 
       type="number" 
       value={minArr[i]} 
       step="any" /> 
      <input className="form-control" 
       placeholder="Maximum Range" 
       type="number" 
       step="any" 
       value={maxArr[i]} /> 
     </label> 
     </div> 

minとmaxは、ユーザの入力にそれぞれ分割、それらが1を選ぶと言う その後、範囲は1 to 10から得ることができます。 2を選択すると、1 to 5と6 to 10となります。

valueを使用すると、私はオプションを再レンダリングできますが、ユーザーは自分の入力をカスタマイズすることができません（1-10ではなく1 to 7）。ドキュメントを読むと、将来（つまりユーザー入力）再レンダリングする機能が必要なので、defaultValueは良い選択肢ではありません。何か案は？

Answer 1

すべての入力の現在の値を状態（または磁束の実装では、もっとも簡単な解決策は状態です）にしておきたいでしょう。すべての値をデフォルト値で初期化し、各入力にvalueとして渡します。各入力には、setStateを呼び出して値を更新するonChangeハンドラがあります。このようにして、ユーザーが入力を変更すると、その状態が新しい変更を反映するように更新され、ユーザーが入力したのと同じ値を表示するように入力が更新されます。それは少しばかげて聞こえるが、それはReactの一般的な練習である。

Answer 2

私はdefaultValueを使用しましたが、私はonChange={this.forceUpdate}を使用しました。