Need React input box to be a floating number

Question

I need a simple input box to be a floating point number (anything with a . really). As it is right now, it doesn't allow me to put the dot and do a floating point. Should be simple but I can't find much on this.

Here is roughly the current code:

class MyComponent extends React.Component {
  render () {
    return (
      <td>
        <label> Value: </label>
            <input
                type='number'
                min='0'
                max='20'
                className='form-control'
                value={this.state.value}
                onChange= {(evt) => this.onValueChange('value', evt.target.value)}
              />
      </td>
    )
  }
}

@Everettss it works but there is an error that step accepts only number, string is invalid type — Bob, Sep 09 '19 at 09:18

score 6 · Accepted Answer · answered Feb 12 '18 at 15:01

6

The number type has a step value controlling which numbers precision which defaults to 1.

You can use this to set the floating point precision

<input type="number" step="0.1">

You will have

class MyComponent extends React.Component {
  render () {
    return (
      <td>
        <label> Value: </label>
            <input
                type='number'
                step="0.1"
                min='0'
                max='20'
                className='form-control'
                value={this.state.value}
                onChange= {(evt) => this.onValueChange('value', evt.target.value)}
              />
      </td>
    )
  }
}

answered Feb 12 '18 at 15:01

Shubham Khatri

246,420
52
367
373

That is not working unfortunately. I actually get the following message: "The specified value "NaN" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?" – theJuls Feb 12 '18 at 15:40
Did you initialize this.state.value to 0 if its undefined, you might get this error – Shubham Khatri Feb 12 '18 at 15:55
I was actually doing some parseInts elsewhere in the code, and I completely forgot to remove it. My bad! – theJuls Feb 12 '18 at 17:08

Need React input box to be a floating number

1 Answers1