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

Posted 2023-02-22

【中文标题】如何将 HMTL 属性设置为 Material UI InputProps？

【英文标题】：How to set HMTL attribute to Material UI InputProps?

【发布时间】：2021-07-10 17:52:05

【问题描述】：

我正在使用带有 Material UI 文本字段的 react-number-format，并且我正在尝试在我的字段中添加 100 的 max 属性。例如，不允许超过 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 带有 prop isAllowed 但我想尝试使用 HTML 属性设置它。

【参考方案1】：

我尝试将它添加到 InputProps 中

将属性传递给原生input 元素的正确道具是<em><strong>i</strong></em>nputProps，而不是<em><strong>I</strong></em>nputProps，注意小写的“i”。

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

结果：

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

【讨论】：

它的行为仍然不正确。它让我输入超过 100 的数字

@WonderDev 按预期工作，你可以输入任何你想要的，如果值无效，你可以使用伪选择器:invalid 来设置错误输入的样式。请参阅max 属性。我的回答只涉及将属性传递给输入元素，您可以使用isAllowed 回调来限制用户可以按照问题中的建议键入的内容。