score:2

Accepted answer
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>
  );
}

score:0

import * as React from 'react';
import NumberInput from 'material-ui-number-input';
import bind from 'bind-decorator';

class Demo extends React.Component {
    setValue(value) {
        this.setState({ value: value });
    }

    @bind
    onChange(event, value) {
        this.setValue(value);
    }

    @bind
    onValid(valid) {
        this.setState({ valid: valid });
    }

    @bind
    onError(error) {
        this.setState({ errorText: error !== 'none' ? 'Error: ' + error : '' });
    }

    constructor(props) {
        super(props);
        this.state = { value: '', valid: 0, errorText: '' };
    }

    render() {
        const { value, valid, errorText } = this.state;
        return (
            <div>
                <NumberInput
                    floatingLabelText="NumberInput"
                    value={value}
                    onChange={this.onChange}
                    onValid={this.onValid}
                    errorText={errorText}
                    onError={this.onError}
                    strategy="allow"
                    required
                />
                <NumberInput value={String(valid)} floatingLabelText="Valid number" />
            </div>
        );
    }
}

score:2

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

Related Query

More Query from same tag