时间戳

首页 > 解决方案 > 如何在 onKeyDown 操作中传递参数？

javascript - 如何在 onKeyDown 操作中传递参数？

问题描述

document.addEventListener('keydown', handle);
  function handle(e) {
   let value = document.getElementById("t11").value 
    if(e.code == "Space"){
      if(value =="n")value="t"
      else if(value == "t")value="P"
      else if(value == "P")value="S"
      else if(value =="S")value="n"
      else value ="n"
      document.getElementById("t11").value = value
    }
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.3.2/react-dom.min.js"></script>
<html>
<body>
<label>Focus the input first (e.g. by clicking in it), then try pressing Space.</label>
<input type="text" id="t11"   className="attendanceInput"  readonly/>
</body>
</html>

我有一个输入，通过按空格键来更改值：

<input type="text" id="11"  onKeyDown={this.handleKeyDown.bind()} className="attendanceInput" readOnly/>

 handleKeyDown(e) {
    if(e.keyCode == 32){
      let value = e.value
      if(value =="n")e.value ="t"
      else if(value == "t")e.value="P"
      else if(value == "P")e.value="S"
      else if(value =="S")e.value="n"
      else e.value ="n"
      document.getElementById("11").value=e.value
    }
  }

我需要输入 id 来更新值和其他操作。我怎样才能做到这一点？谢谢。

标签： javascriptreactjs

解决方案

解决此问题的一种方法是在方法e.currentTarget.id内调用，该handleKeyDown方法将返回id输入元素的 。

但是，如果您希望更新input元素的值，则需要在组件中维护本地状态，然后通过绑定状态更新onChange事件来更新状态。

<input value={input1}  onChange={(e) => this.handleInput(e)} className="attendanceInput" />

推荐阅读