在TextField type =“number”上设置最小/最大值？

Question

我正在使用Material UI v1.0.0-beta23以及redux-form和redux-form-material-ui。我有一个类型编号的字段，我想在标签上设置最小值和最大值。我已经尝试了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">

Answer 1

redux-form Field将道具传递给组件：

所有其他道具将传递给组件prop生成的元素。

TextField有一个名为InputProps的属性，可用于将道具传递给它渲染的Input组件。如果你使用redux-form-material-ui也是如此。它的TextField只是material-ui组件的包装器。

material-ui Input组件有一个属性名称inputProps，可用于将props传递给它呈现的input元素。

好的，我该怎么办？

你需要将道具从Field传递到TextField，再到Input，再到input元素。

因此，如果我们在Field上设置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}
  />

• Field将InputProps传递给TextField
• TextField将InputProps的内容传递给Input
• 输入将inputProps的内容传递给输入

有一个警告：

current implementation of TextField为inputProps设定了自己的值，以便将inputClassName应用于input元素。

通过将您自己的inputProps值传递给TextField，您将覆盖TextField应用的版本，而不会设置inputClassName。如果使用inputClassName，则需要将其包含在内部inputProps对象中。

编辑：我已经提交了一个issue和pull request来解决这个警告在未来的版本中。