Javascript 如何从和onChange事件获取非字母数字键的值是JS/React

当用户按enter或escape键时无法引用

我已经创建了一个计算器应用程序。我希望按钮和键盘可以使用。我的问题在于找出如何引用enter键用法或escape键用法的值。onChange事件似乎没有赋予这些值

我在React中使用了一个类组件来实现这个

我在更改时调用的函数是：

handleKeyboard = (e) => {
    let userInput = e.target.value;
    console.log("beginning of handleKeyboard fx: ", userInput);
    this.setState({
        screenDisplay: userInput
    });
    this.userEntersNonNumber(e);
}

然后，此函数访问以下函数，以确定用户输入非数字时要执行的操作

userEntersNonNumber = (e) => {
    let userInput = e.target.value;
    if (userInput.includes("+") === true) {
        console.log('a plus sign was used');
        this.addition();
    } else if (userInput.includes("-") === true) {
        console.log('a minus sign was used');
        this.subtraction();
    } else if (userInput.includes("*") === true) {
        console.log('a multiplication sign was used');
        this.multiplication();
    } else if (userInput.includes("/") === true) {
        console.log('a division sign was used');
        this.division();
    } else if (userInput.includes("enter")) {
        console.log('the enter key was pressed');
/* I have a function that does the math which would be referenced here */
    } else if (userInput.includes("escape")) {
        console.log('the enter key was pressed');
/* I have a function that clears the calculator which would be referenced 
   here */
    } else {
        console.log('keep typing')
    }
}

调用函数的位置为：

屏幕显示状态是一种显示用户迄今为止在计算器中输入的内容的方式。它是一个字符串，当输入每个键或按下每个按钮时，该键/按钮的值会添加到字符串的末尾

---

用户应该能够使用键盘上的enter键或escape键调用solve或clear函数，这些函数可以计算其输入或清除计算器。按钮是可操作的，但击键不是。

输入标签有另一个事件监听器，名为

onKeyDown

，当用户按键时触发。您可以创建一个全新的事件处理程序，在用户按下escape或enter键时处理逻辑

您只需要从事件中捕获keyCodes，每个键都有相应的keyCodes

class App extends React.Component {

  handleKeyDown = e => {
    if (e.keyCode === 13) {
      console.log("Enter action"); //replace with your code
    } else if (e.keyCode === 27){
      console.log("Escape action") //replace with your code
    }
  };

  render() {
    return <input onKeyDown={this.handleKeyDown} />;
  }
}

类应用程序扩展了React.Component{
handleKeyDown=e=>{
如果（如keyCode===13）{
console.log（“输入操作”）；//替换为您的代码
}否则如果（e.keyCode===27）{
console.log（“转义操作”）//替换为您的代码
}
};
render（）{
返回；
}
}

---

您仍然可以将此事件侦听器与现有的

onChange

事件同时使用。

在

input

标记中有另一个名为

onKeyDown

的事件侦听器，当用户按键时会触发该事件侦听器。您可以创建一个全新的事件处理程序，在用户按下escape或enter键时处理逻辑

您只需要从事件中捕获keyCodes，每个键都有相应的keyCodes

class App extends React.Component {

  handleKeyDown = e => {
    if (e.keyCode === 13) {
      console.log("Enter action"); //replace with your code
    } else if (e.keyCode === 27){
      console.log("Escape action") //replace with your code
    }
  };

  render() {
    return <input onKeyDown={this.handleKeyDown} />;
  }
}

类应用程序扩展了React.Component{
handleKeyDown=e=>{
如果（如keyCode===13）{
console.log（“输入操作”）；//替换为您的代码
}否则如果（e.keyCode===27）{
console.log（“转义操作”）//替换为您的代码
}
};
render（）{
返回；
}
}

---

您仍然可以将此事件侦听器与现有的

onChange

事件同时使用。

我找到了它！我必须添加一个onKeyDown事件来引用userentersonnumber函数来引用enter和escape键的值。修正方法：

<input className="screen" type="text" onChange={this.handleKeyboard} value={this.state.screenDisplay} **onKeyDown={this.userEntersNonNumber}**></input>

---

我知道了！我必须添加一个onKeyDown事件来引用userentersonnumber函数来引用enter和escape键的值。修正方法：

<input className="screen" type="text" onChange={this.handleKeyboard} value={this.state.screenDisplay} **onKeyDown={this.userEntersNonNumber}**></input>

---

非常感谢你！我突然想到，我必须将onKeyDown与onChange结合使用。再次感谢！非常感谢你！我突然想到，我必须将onKeyDown与onChange结合使用。再次感谢！