Как разрешить только цифры вместе с десятичной на входе реакции

Question

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

<FormInput
   name="amount"
   label="Amount"
   onChange: this.handleChange,
   startAdornment: (<InputAdornment position="start">$</InputAdornment>),
   pattern: '[0-9]*',
/>

handleChange = (event) => {
    const { value } = event.target;
    const validValue = Math.abs(parseFloat(value));
    if (validValue && !isNaN(validValue)) {
      // some condition...
      // i have some other set of value that i compare here with input got like if
      // 1) validValue > someValue, then this.setState({ someValue })
      // 2) validValue <= someValue, then this.setState({ validValue })
      // 3) else this.setState({ validValue: 0 })
    }
  }

Но проблема здесь в том, что я не могу ввести десятичную дробь вместе с другими цифрами, как мне нужно ввести 1,2, затем сначала мне нужно ввести 12, а затем добавить «.» (десятичное) перед 2, поэтому, пожалуйста, помогите мне, что я могу сделать, чтобы разрешить цифры с десятичной дробью вдоль других цифр

Answer 1

Вы не должны использовать шаблон для этого. Вы можете просто передать type="number" на ваш ввод, и он выполнит желаемую проверку.

<FormInput
   name="amount"
   label="Amount"
   type="number"
   onChange={this.handleChange}
   startAdornment={<InputAdornment position="start">$</InputAdornment>}
/>

Answer 2

Ваш шаблон не подходит для десятичного значения. Вы можете использовать следующий шаблон для проверки десятичных чисел:

^(\d*\.)?\d+$