Reactjs 为什么物料UI文本字段不同时接受type和maxlength？

我正在使用带有React和TypeScript的材质UI

setUserid（Number（e.target.value））}
variant='filled'/>

---

如果将

type

属性与

inputProps

一起使用，则不会限制最大长度。我没有看到任何错误消息。我看不出哪里做错了。

因为

maxlength

不是

的有效属性，所以应该改用

max

<TextField
  ...
  type="number"
  inputProps={{
    max: <YOUR MAXLENGTH HERE>,
  }}
/>

---

.

因为

maxlength

不是

的有效属性，所以应该改用

max

<TextField
  ...
  type="number"
  inputProps={{
    max: <YOUR MAXLENGTH HERE>,
  }}
/>

---

.

我认为它不适用于数字，但适用于字符串。

---

如果与您的类似，请参阅此问题：

我认为它不适用于数字，但适用于字符串。 如果与您的类似，请参阅此问题：

根据，您应该使用

max

（用于

数字类型）而不是
maxLength
（用于
密码、搜索、电话、文本、url
）：

setUserid（Number（e.target.value））}
variant='filled'/>
根据，您应该使用
max
（用于
数字类型
）而不是
maxLength
（用于
密码、搜索、电话、文本、url
）：

setUserid（Number（e.target.value））}
variant='filled'/>
以下是我用于Marerial UI的简单方法：

对于Typescript您需要明确地告诉Typescript您的目标
HTMLElement
的类型

<TextField
  id='user-id'
  label='user id'
  type='number'
  required
  helperText='Required'
  onInput={(e) => {(e.target as HTMLInputElement).value = Math.max(0, parseInt((e.target as HTMLInputElement).value)).toString().slice(0, 12)}} 
  variant='filled' />

{（e.target作为HTMLInputElement.value=Math.max（0，parseInt（（e.target作为HTMLInputElement.value））.toString（）.slice（0，12）}
variant='filled'/>

这将让TypeScript知道元素是一个
数字
，并知道value属性

您不需要在此处更改
onChange
或
inputProps
。
以下是我用于Marerial UI的简单方法：

对于Typescript您需要明确地告诉Typescript您的目标
HTMLElement
的类型

<TextField
  id='user-id'
  label='user id'
  type='number'
  required
  helperText='Required'
  onInput={(e) => {(e.target as HTMLInputElement).value = Math.max(0, parseInt((e.target as HTMLInputElement).value)).toString().slice(0, 12)}} 
  variant='filled' />

{（e.target作为HTMLInputElement.value=Math.max（0，parseInt（（e.target作为HTMLInputElement.value））.toString（）.slice（0，12）}
variant='filled'/>

这将让TypeScript知道元素是一个
数字
，并知道value属性

您不需要在此处更改
或
输入属性。
您可以使用：

const inputP = {maxLength: 30}

<TextField
  id='user-id'
  label='user id'
  type='number'
  required
  helperText='Required'
  inputProps={inputP}
  onChange={(e) => setUserid(Number(e.target.value))}
  variant='filled' />

constinputp={maxLength:30}
setUserid（编号（e.target.value））}
variant='filled'/>
您可以使用以下功能：

const inputP = {maxLength: 30}

<TextField
  id='user-id'
  label='user id'
  type='number'
  required
  helperText='Required'
  inputProps={inputP}
  onChange={(e) => setUserid(Number(e.target.value))}
  variant='filled' />

constinputp={maxLength:30}
setUserid（编号（e.target.value））}
variant='filled'/>