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行为。

Answer 2

在反应中，您将需要一个控制该输入的状态。创建一个构造函数和cal

this.state={
    input:0
}

你的onChange就像是

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

Answer 3

您需要在加载页面时设置初始值，而不是对value进行硬编码。为此，请使用defaultValue，如下所示：

<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'
/>

数字输入在React app中不会将0作为值

3 个答案: