Question

我正在将Material-UI与React和TypeScript一起使用。

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

如果我将type属性与inputProps一起使用，则它不会限制最大长度。我没有看到任何错误消息。我看不到哪里做错了。

Answer 1

我认为它不适用于数字，但适用于字符串。如果与您的相似，请参见此问题：https://github.com/mui-org/material-ui/issues/5309

Answer 2

您可以使用此：

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' />

Answer 3

由于maxlength不是<input type="number" />的有效属性，因此应改用max。

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

See this issue。

Answer 4

根据MDN，您应该使用max（用于numeric types）而不是maxLength（用于password, search, tel, text, url）：

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

Answer 5

这是我用于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' />

这将使TypeScript知道该元素是number，并将知道value属性。

您在这里不需要onChange或inputProps。

为什么Material-UI文本字段不能同时接受类型和最大长度？

5 个答案: