JIYIK CN >

Handling onKeyPress event in React:

1. Sets the attribute on the element onKeyPress.
2. Use the key property of the event object to get the key that the user pressed.
3. For example, if(event.key === 'Enter') {}.

import {useState} from 'react';

const App = () => {
  const [message, setMessage] = useState('');

  const handleKeyPress = event => {
    console.log(event.key);

    if (event.key === 'Enter') {
      console.log('✅ Enter key pressed');
    }

    // 👇️ 从状态访问输入值
    console.log(message);

    // 👇️ 从 event 对象访问输入值 console.log(event.target.value)
  };

  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        value={message}
        onKeyPress={handleKeyPress}
        onChange={event => setMessage(event.target.value)}
      />
    </div>
  );
};

export default App;

We inputset the onKeyPress attribute on the element, so every time the user presses the button while the input has focus, handleKeyPressthe function will be called.

The key property of the event object returns the value of the key pressed by the user.

Each time the user presses a key, handleKeyPressthe function runs and we check to see if the user pressed Enter.

Conditions if (event.key === 'Enter') {}Cover all operating systems - Windows , Mac , Linux , Android , etc.

If we don't want to track the state of the input field, we can get its value on the target property of the event object.

const App = () => {
  const handleKeyPress = event => {
    console.log(event.key);

    if (event.key === 'Enter') {
      console.log('✅ Enter key pressed');
    }

    // 👇️ 获取 event 对象中的值
    console.log(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        onKeyPress={handleKeyPress}
      />
    </div>
  );
};

export default App;

Instead of storing the value of the input field, we get it using the event object.

The target property of the event refers to the input element.

We can see the keys the user might have pressed by visiting this MDN page .