在 TextField 类型上设置 min/max="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

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

All other props will be passed along to the element generated by the component prop.

它呈现的 TextField has a property named InputProps which can be used to pass props to the Input 组件。如果您使用 redux-form-material-ui，也是如此。它的 TextField 只是 material-ui 组件的包装。

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

好的，那我该怎么办？

你需要一直传递 props，从 Field，到 TextField，到 Input，再到 input 元素。

因此，如果我们在 Field 上设置 InputProps，它将传递给 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 组件
Input 将 inputProps 的内容传递给 input 元素

这里有一个警告：

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

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

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

Answer 2

只需使用您的 inputprops 井

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

注意inputprops中的大小写

感谢 Ken Gregory

Answer 3

其他答案不适合我。

Material UI 有一个用于第 3 方集成的部分 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 4

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

Answer 5

您可以使用 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>
  );
}

Answer 6

这个肯定有用

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 7

将type放入InputProps:

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

在 TextField 类型上设置 min/max="number"？

Set min/max on TextField type="number"?

reactjs

material-ui

redux-form