React number input allows input like 012

Question

The following code example works well with text input type, but allows inputs like 012 or 0012 to be entered when using the number input type.

The console.log line always runs and shows the right value, and the App state is also correct when checked with React Developer Tools. It's only that the controlled input is not being "controlled" somehow.

Why is this happening, and what is the recommended way to use number inputs with React?

class App extends Component {
  constructor() {
    super()
    this.state = {
      value: '',
    }
  }

  handleChange = e => {
    const value = e.target.value
    const num = parseInt(value, 10)
    console.log(num)
    this.setState({ value: isNaN(num) ? '' : num })
  }

  render() {
    return (
      <div className="App">
        <input type="number" value={this.state.value} onChange={this.handleChange} />
      </div>
    )
  }
}

i think it's working as you are expecting, check this fiddle — Mayank Shukla
– Mayank Shukla, Commented Aug 25, 2017 at 10:38
@MayankShukla then it's probably something with the React version. I'm using the latest create-react-app (React 15.6.1, Chrome 60 on OS X). — hyperknot
– hyperknot, Commented Aug 25, 2017 at 10:43
not sure about that, but i think it should not depent on react version. — Mayank Shukla
– Mayank Shukla, Commented Aug 25, 2017 at 10:48

Dimitar Christoff · Accepted Answer · 2017-08-25 11:04:22Z

1

So, you bind the model of the controlled input to a number in your state, which is not being changed between 012 and 12 - so it leaves it as is.

instead, you can do

render() {
  const value = this.state.value.toString()
  return <input type="number" value={value} onChange={this.handleChange} />
}

the string will actually differ and it will re-render properly, stripping the leading 0. or, you could setState({ value: String(num) })

answered Aug 25, 2017 at 11:04

Dimitar Christoff

26.1k8 gold badges53 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

hyperknot Over a year ago

No the value should change between 01 -> 012. Same way as it should change between 0 -> 01. Yet it's not being updated.

hyperknot Over a year ago

It should change without .toString(), I believe.

Dimitar Christoff Over a year ago

I'll grant you that it is kind of strange but I'd argue binding non primitive values to inputs is not a good pattern anyway when the browser will serialise it and call the toString internally. If you change the type from number to text, it works as expected (but does not wash input). So, it may be a particular browser implementation around input[type=number]. Either way, this QnA site is about getting your code to work--which this does--not discussing what changes react devs need to make - that's for the GH issues.

Collectives™ on Stack Overflow

React number input allows input like 012

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related