[解決済み] TextField type="number" に最小値/最大値を設定するには？

質問

Material-UI v1.0.0-beta23を使用しています。 redux-form と redux-form-material-ui . 私が持っているのは Field があり、このタグに最小値と最大値を設定したいのです。私は、両方の inputProps とmin/maxの両方を試しましたが、どちらも私が望むことを行っていないようです。ソースコードを見てみましたが、これを行うための明白な方法が見当たりません。それは可能ですか、そしてもしそうなら、どのように？

私が試したものを示す私のJSXはここにあります。

<Field
  name="maxNodeSelectedCount"
  component={TextField}
  label="Max Node Selected Count"
  type="number"
  inputProps={{ min: 0, max: 10 }}
  min={11}
  max={20}
  format={formatOption}
  normalize={normalizeOption}
  {...propertyFieldDefaults}
/>

DOMはこんな感じです。

<input type="number" class="MuiInput-input-346 MuiInput-inputSingleline-349 MuiInput-inputDense-347" value="-3" name="options.maxNodeSelectedCount">

どのように解決するのですか？

redux-formは フィールド はコンポーネントにプロップを渡します。

他のすべてのpropは、コンポーネントpropによって生成された要素に渡されます。

は テキストフィールド という名前のプロパティがあります。 InputProps という名前のプロパティがあり、これを使用してプロップを 入力 コンポーネントに渡すことができます。 これは redux-form-material-ui . そのTextFieldは、単にmaterial-uiコンポーネントのラッパーです。

マテリアル-uiの Input コンポーネントには inputProps という名前のプロパティがあり、これを使用してプロップを input 要素に渡すことができます。

OK、それで私はどうすればいいのでしょうか？

プロップスをずっと渡す必要があります。 Field から TextField へ、へ Input を、その input 要素に変換します。

ということで、もし InputProps を設定すると、それが TextField に渡され、TextField はそれを Input コンポーネントに渡されます。 渡されたオブジェクトに内側の inputProps (意図的な小文字の 'i') が含まれている場合、Input コンポーネントはそのオブジェクトを input 要素に渡します。

ホットプロパトのゲーム。

基本的には inputProps オブジェクトを InputProps に適用し、それを Field :

<Field
    name="maxNodeSelectedCount"
    component={TextField}
    label="Max Node Selected Count"
    type="number"
    InputProps={{ inputProps: { min: 0, max: 10 } }}
    format={formatOption}
    normalize={normalizeOption}
    {...propertyFieldDefaults}
  />

• フィールドはInputPropsを TextField
• TextFieldはInputPropsの内容を Input コンポーネントに渡す。
• inputはinputPropsの内容を input 要素に渡されます。

これには注意点があります。

は の現在の実装は、TextField には独自の値を設定します。 inputProps に独自の値を設定するため inputClassName が適用されるのは input 要素に適用されます。

独自のinputPropsの値をTextFieldに渡すことで、TextFieldが適用したバージョンを上書きすることになり、結果として inputClassName は未設定になります。 もし inputClassName を使っている場合は、内側の inputProps オブジェクトに含める必要があります。

EDITです。 を投稿しました。 問題 と プルリクエスト を追加して、将来のリリースでこの注意点に対処するようにしました。