如何在反應輸入中只允許數字和小數

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+$