reactjs - MUI TextField 不接受模式

Question

我想让 Material UI TextField 只接受数字值，在 MUI 文档中解决方案如下:

<TextField inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }} />

然而，这是针对 MUI 的第 5 版，在我的例子中，我使用的是第 4 版，所以我尝试了以下操作:

<TextField
      InputProps={{
        inputProps: {
          inputMode: "numeric",
          pattern: "[0-9]*"
        }
      }}
    />

但出于某种原因，这不起作用，我仍然可以在输入中键入数字以外的值。

使用 input="number"不是一个选项，因为我不想在输入为空时保留 0，我也不希望步进器可见。

完整示例在这个沙盒中:https://codesandbox.io/s/mui4-forked-0j98er?file=/src/App.js:136-408

我该如何解决这个问题？

Answer 1

您可以使用非数字字符的受控输入和干净值

export default function MyComponent() {
  const [inputValue, setInputValue] = useState("");

  function onChange(e) {
    setInputValue(e.target.value.replace(/\D/g, ""));
  }

  return (
    <TextField
      label="number input"
      variant="outlined"
      color="secondary"
      fullWidth
      value={inputValue}
      onChange={onChange}
      inputProps={{
        maxLength: 5
      }}

    />
  );
}

@Dmitriif 的回答启发了我，因为它使用的代码更少。但是我tweaked it一点点。 live demo但是，min: 0 不起作用

export default function IconButtons() {
  return (
    <TextField
      label="number input"
      variant="outlined"
      color="secondary"
      fullWidth
      inputProps={{
        type: "text",
        inputMode: "numeric",
        pattern: "d*",
        min: 0,
        maxLength: 5
      }}
    />
  );
}