如何在 react.js 中使用 Enter 键提交表单？

Question

这是我的表单和 onClick 方法。我想在按下键盘的 Enter 按钮时执行此方法。怎么样？

N.B: 没有 jquery 表示赞赏。

comment: function (e) {
  e.preventDefault();
  this.props.comment({
    comment: this.refs.text.getDOMNode().value,
    userPostId:this.refs.userPostId.getDOMNode().value,
  })
},


<form className="commentForm">
  <textarea rows="2" cols="110" placeholder="****Comment Here****" ref="text"  /><br />
  <input type="text" placeholder="userPostId" ref="userPostId" /> <br />
  <button type="button" className="btn btn-success" onClick={this.comment}>Comment</button>
</form>

Answer 1

将 <button type="button" 更改为 <button type="submit"。删除 onClick。而是 <form className="commentForm" onSubmit={this.onFormSubmit}>。这应该捕捉到单击按钮并按下 return 键。

const onFormSubmit = e => {
  e.preventDefault();
  const { name, email } = this.state;
  // send to server with e.g. `window.fetch`
}

...

<form onSubmit={onFormSubmit}>
  ...
  <button type="submit">Submit</button>
</form>

Answer 2

使用keydown事件来完成：

   input: HTMLDivElement | null = null;

   onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
      // 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event
      if (event.key === 'Enter') {
        event.preventDefault();
        event.stopPropagation();
        this.onSubmit();
      }
    }

    onSubmit = (): void => {
      if (input.textContent) {
         this.props.onSubmit(input.textContent);
         input.focus();
         input.textContent = '';
      }
    }

    render() {
      return (
         <form className="commentForm">
           <input
             className="comment-input"
             aria-multiline="true"
             role="textbox"
             contentEditable={true}
             onKeyDown={this.onKeyDown}
             ref={node => this.input = node} 
           />
           <button type="button" className="btn btn-success" onClick={this.onSubmit}>Comment</button>
         </form>
      );
    }

Answer 3

距离上次回答这个问题已经有好几年了。 React 早在 2017 年就引入了“Hooks”，而“keyCode”已被弃用。

现在我们可以这样写：

  useEffect(() => {
    const listener = event => {
      if (event.code === "Enter" || event.code === "NumpadEnter") {
        console.log("Enter key was pressed. Run your function.");
        event.preventDefault();
        // callMyFunction();
      }
    };
    document.addEventListener("keydown", listener);
    return () => {
      document.removeEventListener("keydown", listener);
    };
  }, []);

这会在组件首次加载时在 keydown 事件上注册一个侦听器。它在组件被销毁时删除事件侦听器。

Answer 4

如果您想监听 "Enter" 键，这就是您的做法。您可以使用 onKeydown 道具，您可以在 react doc

中阅读它

这里是 codeSandbox

const App = () => {
    const something=(event)=> {
        if (event.keyCode === 13) {
            console.log('enter')
        }
    }
return (
    <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <input  type='text' onKeyDown={(e) => something(e) }/>
    </div>
);
}

Answer 5

import React, { useEffect, useRef } from 'react';

function Example() {

    let inp = useRef();
    useEffect(() => {
        if (!inp && !inp.current) return;
        inp.current.focus();
        return () => inp = null;
    });

    const handleSubmit = () => {
        //...
    }

    return (
        <form
            onSubmit={e => {
                e.preventDefault();
                handleSubmit(e);
            }}
        >
            <input
                name="fakename"
                defaultValue="...."
                ref={inp}
                type="radio"
                style={{
                    position: "absolute",
                    opacity: 0
                }}
            />
            <button type="submit">
                submit
            </button>
        </form>
    )
}

有时在弹出窗口中在这里输入代码仅绑定一个表单并将 onSubmit 传递给表单是行不通的，因为表单可能没有任何输入。

在这种情况下，如果您通过执行 document.addEventListener 将事件绑定到文档，它将导致应用程序的其他部分出现问题。

为了解决这个问题，我们应该包装一个表单，并且应该输入 css 隐藏的内容，然后您通过 ref 专注于该输入，它将正常工作。

Answer 6

我在@user1032613 的回答和的基础上创建了一个“按下时输入带有查询字符串的点击元素”挂钩。享受吧！

const { useEffect } = require("react");

const useEnterKeyListener = ({ querySelectorToExecuteClick }) => {
    useEffect(() => {
        //
        const listener = (event) => {
            if (event.code === "Enter" || event.code === "NumpadEnter") {
                handlePressEnter();
            }
        };

        document.addEventListener("keydown", listener);

        return () => {
            document.removeEventListener("keydown", listener);
        };
    }, []);

    const handlePressEnter = () => {
        //
        const mouseClickEvents = ["mousedown", "click", "mouseup"];
        function simulateMouseClick(element) {
            mouseClickEvents.forEach((mouseEventType) =>
                element.dispatchEvent(
                    new MouseEvent(mouseEventType, {
                        view: window,
                        bubbles: true,
                        cancelable: true,
                        buttons: 1,
                    })
                )
            );
        }

        var element = document.querySelector(querySelectorToExecuteClick);
        simulateMouseClick(element);
    };
};

export default useEnterKeyListener;

你是这样使用它的：

useEnterKeyListener({
    querySelectorToExecuteClick: "#submitButton",
});

https://codesandbox.io/s/useenterkeylistener-fxyvl?file=/src/App.js:399-407

Answer 7

例如下一个 React+TS 代码（为状态等添加使用钩子）：


type Props = {
...any properties
} & [any other type if need]

//I want notice that input data type of component maybe difference from type of props
const ExampleComponent: React.FC<Props> = (props: [Props or any other type]){
     const anySerice = new AnyService();

     const handleSubmit = async (eventForm) => {
        await anySerice.signUp();
     }

     const onKeyUp = (event: KeyboardEvent) => {
        //you can stay first condition only
        if (event.key === 'Enter' || event.charCode === 13) { 
            handleSubmit(event)
        }
    } 
    
    ...other code
    
    return (<Form noValidate validated={validated} className="modal-form-uthorize" onKeyPress={onKeyUp}>

    ...other components form

    </Form>)
}

export default ExampleComponent;

Answer 8

如果 <form> 中没有表格，您可以在 componentDidMount() 中使用此表格：

componentDidMount = () => {
      document.addEventListener("keydown", (e) => 
        e.code === "Enter" && console.log("my function"))
    }
    
componentDidMount() //<-- remove this, it's just for testing here

Answer 9

这里是非常优化的代码

useEffect(() => {
    document
        .getElementById("Your-element-id")
        .addEventListener("keydown", function (event) {
            if (event.code === "Enter" || event.code === "NumpadEnter") {
                event.preventDefault();
                document.getElementById("submit-element").click();
            }
        });
}, []);

Answer 10

我通过在按钮

中发送自动对焦属性解决了这个问题

   <button autoFocus={true}></button>

Answer 11

使用捕鼠器
https://www.npmjs.com/package/mousetrap
https://www.npmjs.com/package/@types/mousetrap
（是的，我知道，不幸的是，当你使用打字稿时，你必须安装基本模块之外的类型）

import {bind} from 'mousetrap';

const handleSubmit = async () => {
// submit func here
};

bind(['enter', 'return'], handleSubmit);

使用捕鼠器的其他示例，可能用于其他目的：

bind(['command+k', 'ctrl+k'], function(e) {
    highlight([11, 12, 13, 14]);
    return false;
});

Answer 12

所以，我一直在寻找一些解决方案，解决相同的场景，在登录页面上，用户点击（按下）键盘上的回车按钮后应该触发登录过程。

您可以使用以下代码之一配置文本框，

<input
  // rest your code
  onKeyPress={ onkeyup }
/>

请记住我正在使用 React Hooks 来实现它，除此之外 link 将帮助您了解更多 enter key event handler

Answer 13

你可以这样解决这个问题。

   onKeyPress={e => e.key === 'Enter' && handleFormSubmit}

Answer 14

尝试在此处输入代码：

const enterKye=()=>{
if(e.key==="Enter"){
  alert("hello");
  }
}

<input type="text" onKeyPress={enterKye}>

Answer 15

我发现这更容易。通过按“Enter”键在您要提交的输入上侦听 keyDown 事件，并使用条件三元运算符处理提交操作，如下所示。
这主要用于订阅不需要提交按钮的时事通讯。希望对你有帮助。

<input 
     type="email" 
     placeholder="Email" 
     onKeyDown={e => e.key === 'Enter' ? handleSubmit : ''} />

如何在 react.js 中使用 Enter 键提交表单？

How to submit a form using Enter key in react.js?

reactjs

reactjs-flux