web-dev-qa-db-ja.com

TextField type = "number"に最小/最大を設定しますか？

私は、redux-formおよびredux-form-material-uiとともにMaterial UI v1.0.0-beta23を使用しています。タイプ番号のフィールドがあり、タグの最小値と最大値を設定したい。 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">
material-uiredux-form
17
Mike Suiter

Redux-form Field は、小道具をコンポーネントに渡します：

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

TextField にはInputPropsという名前のプロパティがあり、これを使用して、レンダリングする Input コンポーネントに小道具を渡すことができます。 redux-form-material-uiを使用している場合も同様です。 TextFieldは、material-uiコンポーネントの単なるラッパーです。

Material-ui Inputコンポーネントには、プロパティ名inputPropsがあり、これを使用して、レンダリングするinput要素に小道具を渡すことができます。

OK、だから私は何をしますか？

FieldからTextField、Input、input要素まで、すべての小道具を渡す必要があります。

したがって、FieldにInputPropsを設定すると、TextFieldに渡され、Inputコンポーネントに渡されます。渡すオブジェクトに内部inputProps（意図的な小文字 'i'）が含まれている場合、入力コンポーネントはそれを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に渡します
  • 入力はinputPropsの内容をinputに渡しました

これには注意事項があります：

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

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

EDIT：今後のリリースでこの警告に対処するために issue および pull request を送信しました。

25
Ken Gregory