在TextField type=数字(&Q；)上设置最小/最大值(&Q；)？ [英] Set min/max on TextField type="number"?

问题描述

我将Material-UIv1.0.0-beta23与redux-form和redux-form-material-ui一起使用。我有一个Field，即类型Number，我想在标记上设置最小值和最大值。我同时尝试了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">

推荐答案

还原表单Field将道具传递给组件：

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

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

Material-UIInput组件有一个名为inputProps的属性，该属性可用于将道具传递给它呈现的input元素。

好的，那么我该怎么办？

您需要一直传递道具，从Field到TextField，再到Input，再到input元素。

因此，如果我们在Field上设置InputProps，它将被传递给TextField，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元素

这里有一个警告：

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

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

编辑：我已提交issue和pull request以在未来版本中解决此警告。

这篇关于在TextField type=数字(&Q；)上设置最小/最大值(&Q；)？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！