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

Question

我正在尝试在有人按下“ Enter”键时触发功能。在我的函数中，当我console.log keyCode时，它返回“ undefined”。我试过.keyCode，.which，.key，.code，但是它们全部返回未定义。这是我的代码：

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始终为“未定义”。

这里是绑定到的元素：

<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} />

Answer 2

在这里您对events有更多的了解

但长话短说：

使用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)}
    />

---