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

Question

我正在使用 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">

原文由 Mike Suiter 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

redux-form 字段 会将 props 传递给组件：

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

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

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

好的，那我该怎么办？

You need to pass props all the way through, from Field , to TextField , to Input , to the input element.

因此，如果我们在 Field 上设置 InputProps ，它将被传递给 TextField，TextField 会将其传递给 Input 组件。如果我们传递的对象包含一个内部 inputProps （故意小写“i”），则 Input 组件会将其传递给 input 元素。

hot-proptato 游戏：

基本上，在 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 对象中。

编辑： 我已经提交了一个 问题 和 拉取请求，以在未来的版本中解决这个警告。

原文由 Ken Gregory 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

简单地使用你的 输入道具

<TextField
    type="number"
    InputProps={{
        inputProps: {
            max: 100, min: 10
        }
    }}
    label="what ever"
/>

注意 inputprops 中的大小写

归功于肯·格雷戈里

原文由 Chukwuemeka Maduekwe 发布，翻译遵循 CC BY-SA 4.0 许可协议