在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

只需很好地使用您的inputprops

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

注意 inputprops 中的大小写

归功于肯·格雷戈里

Answer 2

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

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

的文本字段具有命名属性InputProps,其可用于道具传递到输入它呈现组件.如果您正在使用,也是如此redux-form-material-ui.它的TextField只是material-ui组件的包装器.

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

好的,我该怎么办？

您需要通过传递道具一路,从Field,到TextField,到Input,到input元素.

因此,如果我们InputProps在Field上设置它,它将被传递给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的内容传递给输入

有一个警告:

TextField的当前实现设置了自己的值,inputProps以便将其inputClassName应用于input元素.

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

编辑:我已经提交了一个问题,请求在将来的版本中解决此警告.

Answer 3

您可以使用inputProps将任何属性应用于本机input元素，包括min和max。

<TextField type="number" inputProps={{ min: 4, max: 10 }} />

请注意，min/max属性不会阻止用户在TextField. 要限制用户可以输入的内容，您可以通过添加onChange处理程序来验证该值，如下所示：

const min = 0;
const max = 10;

export default function BasicTextFields() {
  const [value, setValue] = useState<number>();

  return (
    <div>
      <TextField
        type="number"
        inputProps={{ min, max }}
        value={value}
        onChange={(e) => {
          var value = parseInt(e.target.value, 10);

          if (value > max) value = max;
          if (value < min) value = min;

          setValue(value);
        }}
      />
    </div>
  );
}