时间戳

首页 > 解决方案 > 如何防止用户使用材质ui在TextField中输入字母

reactjs - 如何防止用户使用材质ui在TextField中输入字母

问题描述

我有一些 TextField ，用户只能输入正数。现在我有这个onKeyDown：

<TextField
        label={distanceError}
        error={!!distanceError}
        defaultValue={kpoints.distance}
        onBlur={handleDistanceChange}
        **onKeyDown={(evt) =>
          ['+', '-'].includes(evt.key) && evt.preventDefault()
        }**
        InputLabelProps={{
          shrink: true,
        }}
        inputProps={{
          min: 0,
          id: 'distance-input',
          style: {textAlign: 'center'},
        }}
        variant="outlined"
        size="small"
        type="number"
        aria-label="Distance in angstroms input"
      ></TextField>

这可以防止任何特殊字符，因为我不希望用户能够输入负数。

我可以添加什么来防止用户输入字母 az？

此外，一旦用户输入不同的数字，我还需要防止它把数字变成字符串。

请帮忙！

标签： reactjstypescriptmaterial-ui

解决方案

或者你可以使用这个。由于其他人使用 AirBnB 指南，当仅使用 isNaN 时，他们可能会在 eslint 中出现错误。

<TextField
  value={value}
  variant="outlined"
  onChange={(event) => {
    setValue(!Number.isNaN(Number(event.target.value)) ? event.target.value : value);
  }}
  size="small"
/>

推荐阅读