React 应用程序中数字输入不会将 0 作为值

Question

我有一个类型为 的输入字段number。但是，如果我尝试输入 0，它就会忽略它。这是怎么回事？

我的代码大致如下：

// render part of the component
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>
}

注意：handleChange 没有什么区别，为了测试的目的，我删除了其中的所有代码。

Answer 1

每当0表现得滑稽时，通常都会发现它陷入了虚假的陷阱。

在您的handleChange()函数中，您可能有一些代码尝试执行以下操作：

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

这样做的问题是0这样的检查会失败。相反，您需要显式检查不好的值：

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

是一种方法。这将检查它是否不是其他常见的错误值之一。还有其他方法，但基本思想是确保它不只是默认为正常的 JavaScript 行为。