私は、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">
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}
/>
これには注意事項があります:
TextFieldの現在の実装 は、inputProps
に独自の値を設定し、inputClassName
がinput
要素に適用されるようにします。
InputPropsの独自の値をTextFieldに渡すことにより、TextFieldによって適用されたバージョンを上書きし、inputClassName
を未設定のままにします。 inputClassName
を使用している場合、内部のinputProps
オブジェクトに含める必要があります。
EDIT:今後のリリースでこの警告に対処するために issue および pull request を送信しました。