javascript - 更改时输入的 setState - 无法从输入中删除

Question

我有一个输入:

 <input type="text" value={this.state.current} onChange={this.handleChange.bind(this)} />

handleChange() 方法:

handleChange(e) {
  let val = parseInt(e.target.value); 
  if (val) {
    this.set(val);
  }
}

和set()方法(简单设置1到5之间的数字到状态):

set(val = 1) {
  if (val < 1) {
    val = 1;
  }
  if (val > 5) {
    val = 5;
  }
  this.setState({ current: val });
}

我的问题是:当我想更改输入中的值时，我无法从中删除数字。我认为删除号码后它会立即从状态自动填充。我的代码哪里有问题？

jsFiddle 上的示例:https://jsfiddle.net/4sc3p2ny/

Answer 1

当您尝试从输入中完全删除值时，e.target.value 在本例中返回 '' parseInt(e.target.value) 返回 NaN，因为 parseInt('') 返回 NaN。，您需要检查它并设置 current > 作为空字符串

 handleChange(e) {
   let val = parseInt(e.target.value);

   if (isNaN(val)) {
     this.setState({ current: '' });
   } else {
     if (val < 1) {
       val = 1;
     }

     if (val) {
       this.set(val);
     }
   }
 }

Example