Number with decimal input in React?

Question

I have a number input within a React component, and it needs to accept numbers with a decimal point. Usually, entries will be in the fractions of a cent, like 0.0073, that kind of thing.

<div className="form-group">
  <label htmlFor="rate" className="col-sm-6 control-label">Rate:</label>
  <div className="col-sm-2"> 
    <input type="number"
      title="Rate"
      id="rate"
      className="form-control"
      value={this.props.rate}
      min="0.00"
      step="0.001"
      max="1.00"
      onChange={()=>{
        console.log('page rate changed');
        this.props.setrate($('#rate').val());
      }} />
  </div>
</div>

The issue is that with every keystroke, it's resetting the rate for the app, and then putting that value into the input. So it goes like this:

• User types 0, the value is set to 0, and 0 is displayed.
• User types ., 0. isn't a valid number, so the input is cleared.

Can anyone think of a workaround? I know I could just use a normal input, but type="number" leads to some nice stuff in various browsers.

Answer 1

    <input
        type="text"
        value={this.props.rate}
        onChange={this.onAmountChange}
      />

type should be text and input value should be defined by regex.

onAmountChange = e => {
    const amount = e.target.value;

    if (!amount || amount.match(/^\d{1,}(\.\d{0,4})?$/)) {
      this.setState(() => ({ amount }));
    }
  };

regex here means: start with a number and add as many as you want. then optionally end with decimal numbers up to 4 decimals.

Answer 2

You can do something like this

const floatRegExp = new RegExp('^[+-]?([0-9]+([.][0-9]*)?|[.][0-9]+)$')

const handleValidationOnChange = (e, v, onChange) => {
  const { value } = v
  if (value === '' || floatRegExp.test(value)) {
    onChange(e, v)
  }
}

const InputFloat = props => {
  if (typeof props.onChange !== 'function') {
    return <Form.Input { ...props } />
  }

  const { onChange, ...parentProps } = props

  return <Form.Input
    { ...parentProps }
    onChange={(e, v) => handleValidationOnChange(e, v, onChange)}
  />
}

Form.Input can be any Component that has a value.

You will have to later check for '', that is unavoidable.

Answer 3

<input type="number"
      title="Rate"
      id="rate"
      className="form-control"
      value={this.props.rate}
      min="0.00"
      step="0.001"
      max="1.00"
      presicion={2}   //very important
      onChange={()=>{
        console.log('page rate changed');
        this.props.setrate($('#rate').val());
      }} />