如何在 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={onFormSubmit}>

。这应该捕捉到点击按钮并按下返回键。

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

...

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

没有任何愚蠢的表单库的完整示例：

function MyForm() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [submitting, setSubmitting] = useState('')
  const [formError, setFormError] = useState('')

  const onFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    try {
      e.preventDefault();
      setFormError('')
      setSubmitting(true)
      await fetch(/*POST email + password*/)
    } catch (err: any) {
      console.error(err)
      setFormError(err.toString())
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <form onSubmit={onFormSubmit}>
      <input type="email" value={email} onChange={e => setEmail(e.currentTarget.value)} required />
      <input type="password" value={password} onChange={e => setPassword(e.currentTarget.value)} required />
      {Boolean(formError) &&
        <div className="form-error">{formError}</div>
      }
      <button type="submit" disabled={submitting}>Login</button>
    </form>
  )
}

附言请记住，表单中任何不应提交表单的按钮都应明确具有

type="button"

.

Answer 2

距离上次回答这个问题已经好几年了。 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 3

使用

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 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

如果你没有里面的表格

<form>

，你可以在

componentDidMount()

中使用它：

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

Answer 7

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

    document.addEventListener('keydown', keyEnter)

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

Answer 8

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

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

Answer 9

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

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

Answer 10

你可以使用

<button type='submit'></button>

中间什么都没有。

Answer 11

这里是非常优化的代码

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 12

使用捕鼠器
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 13

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

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

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

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

Answer 14

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

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

Answer 15

您只能更改按钮类型=>提交按钮

    <form
        onSubmit={e => {
            e.preventDefault();
            handleSubmit(e);
        }}
       >
        <input
            name="developers"
            defaultValue="submit"
            ref={dev}
            type="radio"
        />
        <button type="submit">
            submit
        </button>
    </form>

Answer 16

试试这个：

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

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

Answer 17

例如下一个 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 18

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

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

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

问题描述投票：0回答：18

18个回答

最新问题

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

问题描述 投票：0回答：18

18个回答

最新问题

问题描述投票：0回答：18