在反应中显示输入值之间的延迟

Question

我要解决的是使用 e.target.value 进行状态更新的一键延迟。

我尝试在没有 redux 的情况下解决它，但我遇到了完全相同的问题。

http://codepen.io/yoloonthebf/pen/Kmwrpq?editors=0010

非常感谢您的帮助，希望您能从我的笔中理解这个问题。

class App extends React.Component{ 
  //here is the issue ?!
  handleChange(e){

    const BACKSPACE_KEYCODE = 8;
    const keyCodeIn = e.keyCode;
    if ( !isNumber(keyCodeIn) && !(keyCodeIn === BACKSPACE_KEYCODE) ) {
      return e.preventDefault();
    }else{
      store.dispatch({type: 'UPDATE', payload: e.target.value});
    }
    function isNumber(keyCode){
      return (keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105)
    }
    console.log(store.getState())
  }

  render(){
    return(
      <div className='container'>
        <h1>{store.getState()}</h1>
        <input 
          type='text' 
          className='form-control' 
          maxLength='16'
          onKeyDown={this.handleChange.bind(this)}
        />
      </div>
    )
  }
}

编辑： 我忘了说我只需要数字，确切地说是 16 个，我想构建一个信用卡验证工具。

Answer 1

这是因为您的onKeyDown 事件。 e.target.value 在onKeyUp 事件之后填充，而不是在onKeyDown 之后填充。你应该使用onChange 事件：

http://codepen.io/anon/pen/OmPrNz?editors=0010

希望它能满足你的需求