javascript - Number input won't take 0 as a value in React app - Stack Overflow

admin管理员组

文章数量:1279050

I have an input field of type number. However, if I try to input 0, it will just ignore it. What's going on?

Here is roughly my code:

// render part of the ponent
return {
<div>
  <input
    type='number'
    step='1'
    min='0'
    max='20'
    value={this.state.myTargetsValue}
    // @ts-ignore
    onFocus={(evt) => evt.target.select()} // This selects all text on the first click
    onChange={(evt) => this.handleChange(key, 'myTarget', evt.target.value)}
    className='form-control'
  />
</div>
}

Note: the handleChange doesn't make a difference, I removed all code from it for the purpose of testing.

I have an input field of type number. However, if I try to input 0, it will just ignore it. What's going on?

Here is roughly my code:

// render part of the ponent
return {
<div>
  <input
    type='number'
    step='1'
    min='0'
    max='20'
    value={this.state.myTargetsValue}
    // @ts-ignore
    onFocus={(evt) => evt.target.select()} // This selects all text on the first click
    onChange={(evt) => this.handleChange(key, 'myTarget', evt.target.value)}
    className='form-control'
  />
</div>
}

Note: the handleChange doesn't make a difference, I removed all code from it for the purpose of testing.

• javascript
• reactjs
• input

Share Improve this question Follow asked Apr 5, 2018 at 20:41 theJulstheJuls 7,4701818 gold badges9696 silver badges182182 bronze badges 6

• What's this.state.myTargetsValue ? – Benjamin Gruenbaum Commented Apr 5, 2018 at 20:44
• It's likely something to do with value={this.state.myTargetsValue} overwriting – dmamills Commented Apr 5, 2018 at 20:44
• where can I see the definition of variable key? and show me the function handleChange – Lead Developer Commented Apr 5, 2018 at 20:45
• Why would it be though? Other values work. Is it perhaps that 0 is being seen as falsy? The default value of the this.state.myTargetsValue should be an empty string. – theJuls Commented Apr 5, 2018 at 20:45
• if you pass 0 directly into value does it work? I mean ... value={0} ... – assembler Commented Apr 5, 2018 at 20:47

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 8

Whenever 0 is acting funny, it generally turns out that its falling into a trap of ing up falsey.

In your handleChange() function, it's likely you have some code that is trying to do something along these lines:

if (newValue) {
  this.setState({ key: newValue });
}

The problem with that is 0 going to fail a check like that. Instead, you'll need to explicitly check the values that aren't good:

if (![null, '', false].includes(newValue)) { }

is one approach. That would check that it isn't one of the other mon falsey values. There are other ways, but the basic idea is to make sure it doesn't just default to normal JavaScript behavior.

In react, you will need a state that controls that input. Make a constructor, and cal

this.state={
    input:0
}

And your onChange will be something like

e => this.setState({input:e.target.value})

Instead of hardcoding the value, you want to set an initial value upon loading your page. To do this use defaultValue like so:

<input
  type='number'
  step='1'
  min='0'
  max='20'
  defaultValue={course.credits}
  // @ts-ignore
  onFocus={(evt) => evt.target.select()} // This selects all text on the first click
  onChange={(evt) => this.handleChange(key, 'myTarget', evt.target.value)}
  className='form-control'
/>

本文标签： javascriptNumber input won39t take 0 as a value in React appStack Overflow