如何将 HMTL 属性设置为 Material UI InputProps？

问题描述

我正在将 react-number-format 与 Material UI Textfield 一起使用，并且我正在尝试在我的字段上添加 100 的最大属性。例如，不允许超过 100 的数字。 如何使用 HTML 属性执行此操作：min？

import InputAdornment from "@material-ui/core/InputAdornment";
import TextField from "@material-ui/core/TextField";
import NumberFormat from "react-number-format";


interface IProps {
  endAdornment?:React.FC;
  error?: string;
  fixedDecimalScale?: boolean;
  fullWidth: boolean;
  label: string;
  numberLimit: number;
  onChange: () => void;
  placeholder: string;
  thousandSeparator: boolean;
  touched?: boolean;
  value: number;
  variant: string;
  inputComponent?: React.FC;
}



  return (
    <NumberFormat
      InputProps={
        props.inputComponent
          ? {
              endAdornment: (
                <InputAdornment position="start">
                  {props.inputComponent}
                </InputAdornment>
              ),}
          : null
      }
      inputProps={{ max: 100 }}
      customInput={TextField}
      decimalScale={0}
      error={Boolean(props.error) && props.touched ? true : false}
      fixedDecimalScale={props.fixedDecimalScale}
      fullWidth={props.fullWidth}
      helperText={
        Boolean(props.error) && props.touched ? props.error : undefined
      }
      id={id}
      label={props.label}
      margin="normal"
      onChange={props.onChange}
      placeholder={props.placeholder}
      thousandSeparator={props.thousandSeparator}
      value={props.value}
      variant={props.variant}
    />
  );
};

export default NumberField;

我也尝试将它添加到 InputProps 中，但我似乎无法找出正确的格式。 我知道 NumberFormat 带有道具 isAllowed 但我想尝试使用 HTML 属性设置它。

解决方法

我尝试将其添加到 InputProps 中

将属性传递给原生 input 元素的正确 props 是 inputProps，而不是 InputProps，注意小写的“i”。

<TextField {{ type: "number",min: 0,max: 10 }} />

结果：

<input type="number" max="10" min="0">