Question

keyCode 返回“未定义”（反应）

2020-04-15

4687

javascript reactjs

我试图在有人按下“Enter”时触发一个函数。在我的函数中，当我 console.log keyCode 时，它返回“undefined”。我试过 .keyCode、.which、.key、.code，但它们都返回 undefined。这是我的代码：

handleLineCount = (event) => {
        console.log(event.keyCode);
        let charCount = event.length;
        let myIndex = 0;

        this.setState({
            charCount: charCount,
        });

        if(charCount === 5 && event.keyCode !== 8 || event.keyCode === 13){
            myIndex++; 

            this.setState({
                lines: [...this.state.lines, myIndex]
            })
        }
    }

在将事件值传入函数时，如何获取 keyCode 的值？这是一个 onChange 事件。我还尝试过使用 onKeyDown 事件、onKeyUp 事件、onKeyPress 事件，但 keyCode 始终为“undefined”。

这是它绑定到的元素：

<textarea 
  id="first-line"
  placeholder="this is a test to count line numbers..." 
  style={{width: "60%", padding: "10px 10px 0", boxSizing: "border-box"}}
  maxlength="5"
  onChange={(e) => this.handleLineCount(e.target.value)}/>

Answer 1

您没有将 event 对象传递给 handleLineCount ：

<textarea onKeyPress={handleLineCount} />

Dennis Vash

2020-04-15

Answer 2

在这里，您可以了解有关 React 中的事件的更多信息

但长话短说：

使用 nativeEvent 访问 keyCode，因为参数中的事件是 React 发送的合成事件，并且在那里您有 event.nativeEvent.keyCode

编辑

您应该只将 e 传递给函数，而不是 e.target.value

<textarea 
   id="first-line"
   placeholder="this is a test to count line numbers..." 
   style={{width: "60%", padding: "10px 10px 0", boxSizing: "border-box"}}
   maxlength="5"
   onChange={(e) => this.handleLineCount(e)}
/>

Answer 3

您需要发送 event.keyCode ，而不是 event.target.value ....

    <textarea 
     id="first-line"
     placeholder="this is a test to count line numbers..." 
     style={{width: "60%", padding: "10px 10px 0", boxSizing: "border-box"}}
     maxlength="5"
     onKeyDown={e => this.handleLineCount(e.keyCode)}
    />