Keydown 和 Mouseclick 调用相同的函数但行为不同

Question

我有一个反应组件，由一个输入框、一个按钮和一个最初隐藏的结果框组成。有一个函数可以对 REST API 进行异步调用，获取数据并将其显示在结果框中（使其可见）。我希望在单击按钮或按回车键时调用该函数。

对于按钮点击，我有：

<button onClick={this.myFunc}>

对于回车键，我有：

<input onKeyUp={this.keyHandler}>
keyHandler = (e) => {
if(e.key === "Enter"){ //tried keycode too
this.myFunc(); }}

我有一个状态变量 isResultLoaded，它设置结果框的可见性，即当 myFunc 从 API 获取结果时，isResultLoaded 设置为 true，这使得结果框可见。

问题： 当我点击按钮时，结果框完美显示。但是当我按下回车键时，结果被加载，并且isResultLoaded也被设置为true（我在控制台上记录了它），但是结果框仍然没有出现。

style={{ visibility: this.state.isResultLoaded ? "visible" : "hidden" }} // For result box

为什么有两种不同的行为？我该如何解决这个问题？

更新： myFunc() 中有一行关注结果框，这导致了这个问题。在评论该行时，Keydown 和 Mouseclick 都工作正常。但我需要那条线来实现一个功能。

document.getElementById("result-box").focus(); //tabindex is set to 0

任何解决方法？

Answer 1

这是一个代码

使用 onkeypress 这样它就能正常工作

function keyHandler(e){
  if(e.key === "Enter"){ //tried keycode too
    myFunc(); 
  }
}


function myFunc(){
  console.log('running...')
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<button onClick="myFunc()">test</button>
  <input onkeypress="keyHandler(event)">
</body>
</html>

Answer 2

keydown

当用户按下一个键时触发。当用户按住该键时它会重复。

keypress

当实际字符被插入时触发，例如，文本输入。当用户按住该键时它会重复。

keyup

在执行该键的默认操作后，当用户释放键时触发。

textinput

当字符实际添加到控件时触发。因此，如果用户按下字符键，但默认情况下阻止了 onkeydown 或 onkeypress，则不会触发 textinput 事件，因为序列不会导致添加字符。

Keydown 和 Mouseclick 调用相同的函数但行为不同

Keydown and Mouseclick calling same function but behaving differently

javascript

reactjs

react-state