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

Question

I'm trying to trigger a function when someone presses 'Enter'. In my function, when I console.log the keyCode, it returns 'undefined'. I've tried.keyCode, .which, .key, .code, but all of them return undefined. Here is my 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]
            })
        }
    }

How do I get the value of the keyCode when passing in the event value into the function? This is an onChange event. I've also tried using an onKeyDown event, an onKeyUp event, an onKeyPress event and the keyCode is always 'undefined'.

Here is the element it is bind to:

<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

You don't pass the event object to handleLineCount :

<textarea onKeyPress={handleLineCount} />

Answer 2

Here you have more about events in react

But long story short:

use nativeEvent to access keyCode, since event in arguments is synthetic event sent by react and in there you have event.nativeEvent.keyCode

EDIT

You should pass only e to function not 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

You need to send the event.keyCode , not the 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)}
    />

---