Как увеличить постоянное значение на значение, введенное в поле ввода текста в материале

Question

Я создал поле, используя компонент Input для material-ui:

<Input
  placeholder="0.00"
  value={rate}
  onChange={event => {
    this.setState({
      `obj.rate`,
      event.target.value 
    });
  }}
/>

Поэтому, всякий раз, когда я ввожу курс в это поле,

• 1 ) он должен автоматически добавлять «.00» в конце (например: я ввел 71, он должен отображать 71,00)

• 2) Если я ввожу значение, начинающееся с точки ( .), затем цифры должны вводиться после точки и могут быть введены до 2 цифр. (Например: я ввел .2 ===> Должен отображаться 0,20, если я ввел .34 ====> 0,34)

Пожалуйста, помогите мне с этой проблемой.

Заранее спасибо!

Answer 1

Я бы посоветовал вам думать как калькулятор. В поле, если вы пытаетесь отформатировать его. Не позволяйте своему пользователю набирать очки. Это сложно усложнить смешивание чисел с другими персонажами.

Давайте попробуем маску. Пожалуйста, взгляните на эту кодовую коробку: https://codesandbox.io/s/inspiring-paper-0ybrz

По сути, мы собираемся определить функцию для форматирования любого пользовательского ввода или прошлого в поле.

export function decimalChangeHandler(event) {
  event.target.value = formatDecimal(event.target.value);
}

export function formatDecimal(value) {
  if (typeof value === "undefined") return;
  value = value.toString();
  value = value.replace(/\D/g, ""); // only numbers
  value = value.replace(/(\d{1})(\d{14})$/, "$1,$2");
  value = value.replace(/(\d{1})(\d{11})$/, "$1,$2"); // for 11 digits
  value = value.replace(/(\d{1})(\d{8})$/, "$1,$2"); // for 8 digits
  value = value.replace(/(\d{1})(\d{5})$/, "$1,$2"); // for 5 digits
  value = value.replace(/(\d{1})(\d{1,2})$/, "$1.$2"); // put 2 digits
  return value; // return the value
}

Теперь мы будем вызывать эту функцию при изменении поля:

export default function App() {
  const [value, setValue] = useState(null);
  const classes = useStyles();

  const handleChangeValue = event => {
    setValue(decimalChangeHandler(event));
  };

  return (
    <div className="App">
      <h1>Mask Example</h1>

      <form className={classes.root} noValidate autoComplete="off">
        <TextField
          label="Value"
          value={value}
          placeholder="0.00"
          onChange={handleChangeValue}
          InputLabelProps={{
            shrink: true
          }}
        />
      </form>
    </div>
  );
}