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

这是我的表单和 onClick 方法。我想执行这个方法时，键盘的回车按钮被按下。怎么做到的？

注意: 没有 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>
238628 次浏览
小开
最佳答案

将 <button type="button"改为 <button type="submit"。移除 onClick。取而代之的是 <form className="commentForm" onSubmit={this.onFormSubmit}>。这将捕捉单击按钮和按下返回键。

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


...


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

使用 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>
);
}
小开

这个问题已经有好几年没有得到回答了。 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事件上注册一个侦听器。它在组件销毁时删除事件侦听器。

小开

如果你想要听到“ Enter”键，这就是你如何做到的。 有一个 onKeydown 道具，您可以使用它，并且可以在 < a href = “ https://reactjs.org/docs/events s.html # key-events”rel = “ norefrer”> response doc 中阅读相关内容

这是 代码沙盒

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>
);
}
小开 
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 它将正常工作。

小开

我在@user1032613的答案和 这个答案上建立了一个“ on press enter click element with querystring”挂钩。好好享受吧！

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


const useEnterKeyListener = ({ querySelectorToExecuteClick }) => {
useEffect(() => {
//https://stackoverflow.com/a/59147255/828184
const listener = (event) => {
if (event.code === "Enter" || event.code === "NumpadEnter") {
handlePressEnter();
}
};


document.addEventListener("keydown", listener);


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


const handlePressEnter = () => {
//https://stackoverflow.com/a/54316368/828184
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

小开

例如下一个 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;
小开

如果你在 <form>中没有表单，你可以在 componentDidMount()中使用:

componentDidMount = () => {
document.addEventListener("keydown", (e) =>
e.code === "Enter" && console.log("my function"))
}
    

componentDidMount() //<-- remove this, it's just for testing here

小开

这是一个非常优化的代码

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

我通过在按钮中发送 autoFocus 属性来解决这个问题

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

使用 捕鼠器
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;
});
小开

因此，我正在寻找一些解决方案，在登录页面上，当用户点击(按下)键盘上的输入按钮后，应该触发登录过程。

您可以使用一个代码配置文本框,

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

请记住，我正在使用反应钩实现它，除此之外，这个链接将帮助您了解更多的 输入键事件处理程序

小开

你可以这样处理这个问题。

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

试试这里的输入码: 

const enterKye=()=>{
if(e.key==="Enter"){
alert("hello");
}
}
<input type="text" onKeyPress={enterKye}>

小开

我发现这样更容易。 在你想提交的输入中侦听 keyDown 事件，按下“ Enter”键，然后使用条件三元操作符处理提交操作，如下所示，单行显示。
这主要是用于订阅时事通讯，不需要按钮就可以提交。 希望能有帮助。

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

小开 
useEffect(() => {
const keyEnter = event => {
if (event.key === 'Enter') {
event.preventDefault()
}
}


document.addEventListener('keydown', keyEnter)


return () => {
document.removeEventListener('keydown', keyEnter)
}
}, [])
小开

您可以使用 <button type='submit'></button>，中间没有任何内容。


提交答案