如何修改Material-UI的TextField输入类型为数字(Number)

Question

目前，在Material-UI的TextField中，type = "number" 只接受 数字(0-9)、逗号(,) 和 双破折号(--)。

但是，我只需要一个破折号(-)。

我尝试在inputProps中插入模式，但好像不起作用。

非常感谢任何帮助。

谢谢

 <TextField
    label="Super Koin"
    variant="outlined"
    type="number"
    inputProps={{
       pattern: /^-?\d+(?:\.\d+)?$/g
      }}
    name="Gajian"
    style={{ marginBottom: "22px" }}
    defaultValue={
        (form.injectCustomer && form.injectCustomer.supercoin) ||
            0
         }
     fullWidth
     inputRef={this.superPoints}
     InputLabelProps={{
         shrink: true
      }}
     onChange={e => {
                      
     this.actionRow(
     { key: "supercoin", value: (e.target.value)},
            "supercoin"
         );
       }}
     />

我试图在onChange中进行验证。

 onChange={e => {
    console.log(e.target.value,"EEE")
    this.actionRow({ 
      key: "supercoin", 
      value: e.target.value === "--" ? e.target.value = 0 : e.target.value = 
     },
      "supercoin"
    );
                       
}}

但是，对于"-"和"--"的控制台日志为空，并且似乎无法从onChange验证

- htpea

Answer 1

我认为在使用模式时，必须使用 type="text"。

然后在你的 inputProps 中添加 inputMode: 'numeric'。

<TextField 
    type="text" 
    inputProps={{ 
           inputMode: 'numeric', 
           pattern: '/^-?\d+(?:\.\d+)?$/g'
    }} 
/>

- user3767285

---

它不起作用了，感谢您的光临，您可能还有其他建议吗？ - htpea

当输入无效时，您必须添加样式 input:invalid { background-color: lightpink; } - Fraction

@Fraction 啊，我明白了，但是你有什么建议让用户只能输入正负数，而不是给文本框上色吗？ - htpea

@Fraction 先生，还有一个问题，当我输入错误时，它会改变颜色，对吗？当我按提交按钮时，它是否会提交（发送有效载荷）？我正在考虑您的答案。 - htpea

注意：确保是 inputProps 而不是 InputProps。第一个可以接受 inputMode: numeric，因为它适用于 DOM 输入。而第二个则不行，因为它适用于 MUI 的输入。 - eMTy

Answer 2

你可以使用 react-number-format 并提供一个自定义实现的 <input> 元素，使用 inputComponent 属性：

import React from "react";
import PropTypes from "prop-types";
import NumberFormat from "react-number-format";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";

const NumberFormatCustom = React.forwardRef(function NumberFormatCustom(props, ref) {
  const { onChange, ...other } = props;

  return (
    <NumberFormat
      {...other}
      getInputRef={ref}
      onValueChange={(values) => {
        onChange({
          target: {
            name: props.name,
            value: values.value,
          },
        });
      }}
      // isNumericString
    />
  );
});

NumberFormatCustom.propTypes = {
  name: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
};

export default function FormattedInput() {
  const [numberformat, setNumberformat] = React.useState(0);

  const handleChange = (event) => {
    setNumberformat(event.target.value);
  };

  return (
    <Box>
      <TextField
        label="react-number-format"
        value={numberformat}
        onChange={handleChange}
        name="numberformat"
        id="formatted-numberformat-input"
        InputProps={{
          inputComponent: NumberFormatCustom,
        }}
        variant="standard"
      />
    </Box>
  );
}

- Fraction

Answer 3

onChange={(evt) => {
  evt.stopPropagation()
  evt.preventDefault()
  evt.currentTarget.value = evt.target.value.replace(/[\D\s]/, '')
  return 
 }}

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

- Allan Felipe Murara