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

我希望它能满足您的需求

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

1 个答案: