在 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">

Answer 1

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

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

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

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>
  );
}

Answer 2

将type 放入InputProps：

      <Field
        name="number"
        label="Number"
        component={TextField}
        InputProps={{
          inputProps: {
            type: 'number',
            min: 0, max: 25,
          },
        }}
      />

Answer 3

这肯定行得通

handleMobileNumber = (e) => {
 if (e.target.value.split("").length <= 10) {
  this.setState({
    mobileNumber: e.target.value,
  });
 }
};

<TextField
  label="Enter Mobile Number"
   variant="outlined"
   value={this.state.mobileNumber}
   onChange={this.handleMobileNumber}
   type="number"
/>

Answer 4

<TextField
            label="Username"
            id="outlined-start-adornment"
            variant="outlined"
            inputProps={{minlength:5, maxLength: 20}}
          />

Answer 5

好好利用你的inputprops

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

注意 inputprops 中的大小写

感谢肯·格雷戈里

Answer 6

其他答案对我不起作用。

Material UI 有一个用于 3rd 方集成的部分here

它确实可以只写数字而不是负数。

import NumberFormat from 'react-number-format';

function NumberFormatCustom(props) {
    const { inputRef, onChange, ...other } = props;
    
     return (
            <NumberFormat
                {...other}
                getInputRef={inputRef}
                allowNegative={false}
                onValueChange={(values) => {
                    onChange({
                        target: {
                            name: props.name,
                            value: values.value,
                        },
                    });
                }}
                isNumericString
            />
        );
}
    
<TextField
    label="react-number-format"
    value={values.numberformat}
    onChange={handleChange}
    name="numberformat"
    id="formatted-numberformat-input"
    InputProps={{
          inputComponent: NumberFormatCustom,
     }}
/>

Answer 7

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

所有其他 props 都会传递给组件 props 生成的元素。

TextField 有一个名为 InputProps 的属性，可用于将 props 传递给它呈现的 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 元素。

热播游戏：

基本上，在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 元素

有一个警告：

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

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

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