在 React.js 中使用 Enter 键提交表单

作者

在 React.js 中使用回车键提交表单

Submit a form using the Enter key in React.js

在 React 中使用 Enter 键提交表单：

  1. 添加一个类型设置为 的按钮元素submit。
  2. 添加一个onSubmit指向提交处理函数的道具。
  3. 每次用户按下 Enter 时，都会调用 handle 提交函数。
应用程序.js
import {useState} from 'react';

const App = () => {
  const [first, setFirst] = useState('');
  const [last, setLast] = useState('');

  const handleSubmit = event => {
    event.preventDefault();

    console.log('form submitted ✅');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          id="first"
          name="first"
          value={first}
          onChange={event => setFirst(event.target.value)}
          autoComplete="off"
        />
        <input
          type="text"
          id="last"
          name="last"
          value={last}
          onChange={event => setLast(event.target.value)}
          autoComplete="off"
        />

        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default App;

提交表单输入密钥

请注意，按钮元素的type属性设置为submit。这是代码片段中最重要的细节。

我们要做的第二件事是onSubmit在表单元素上设置 prop。

现在，每次用户按下 Enter 键时，都会提交表单并
handleSubmit调用函数。

我们使用函数中的event.preventDefault()方法来防止提交表单时页面刷新。 handleSubmit

如果需要在提交表单后清除表单元素的值，请将它们设置为空字符串或各自的初始值。

应用程序.js
const handleSubmit = event => {
  event.preventDefault();

  console.log('form submitted ✅');

  // 👇️ clearing input values after submit
  setFirst('');
  setLast('');
};

或者，您可以添加一个监听键的事件监听器Enter。

在 React 中使用 Enter 键提交表单：

  1. 向元素添加keydown事件侦听document器。
  2. 如果用户按下 Enter 键，则调用您的提交处理程序函数。
应用程序.js
import {useEffect, useState} from 'react';

const App = () => {
  const [first, setFirst] = useState('');
  const [last, setLast] = useState('');

  const handleSubmit = () => {
    console.log('form submitted ✅');
  };

  useEffect(() => {
    const keyDownHandler = event => {
      console.log('User pressed: ', event.key);

      if (event.key === 'Enter') {
        event.preventDefault();

        // 👇️ call submit function here
        handleSubmit();
      }
    };

    document.addEventListener('keydown', keyDownHandler);

    return () => {
      document.removeEventListener('keydown', keyDownHandler);
    };
  }, []);

  return (
    <div>
      <form>
        <input
          type="text"
          id="first"
          name="first"
          value={first}
          onChange={event => setFirst(event.target.value)}
          autoComplete="off"
        />
        <input
          type="text"
          id="last"
          name="last"
          value={last}
          onChange={event => setLast(event.target.value)}
          autoComplete="off"
        />

        <button>Submit</button>
      </form>
    </div>
  );
};

export default App;

我们使用useEffect
挂钩向元素添加keydown事件侦听document器。

现在每次用户按下一个键时，keyDownHandler都会调用该函数。

输入密钥侦听器

在函数中，我们简单地检查用户是否按下了Enter键，如果按下了，我们就调用该handleSubmit函数。

我们从useEffect钩子返回的函数用于在组件卸载时清理事件监听器。

即使用户没有关注任何输入字段，此解决方案也能正常工作。页面上的任何元素都可以具有焦点，并且当用户按下该Enter
键时，将提交表单。

–