反应：检查表单提交时按下的键

Question

我正在使用 React（和 Material UI），我正在尝试提交表单.默认情况下，当焦点位于文本字段时按 enter，表单将提交。我希望它只在我按下提交按钮时发生。

形式

<Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
    <TextField
        margin="normal"
        required
        fullWidth
        id="title"
        label="Title"
        name="title"
        autoComplete="title"
        autoFocus
        defaultValue={title}
    />
    <TextArea setData={setData} data={JSON.parse(description)} />
    <Button
        type="submit"
        fullWidth
        variant="contained"
        sx={{ mt: 3, mb: 2 }}
    >
        Finish
    </Button>
    <Link href="/">
        Back
    </Link>
</Box>

提交功能

 const handleSubmit = async (e) =>
    {
        e.preventDefault();
        console.log(e)
        //
    }

Answer 1

这是默认行为，因为您的代码在 form 中。用户光标在哪里对您来说无关紧要。这对于屏幕阅读器和基本用户体验来说是必需的。

要关注下一个字段，用户应该能够切换到下一个字段。

e.preventDefault 是为了防止页面在提交时重新加载。

Answer 2

我刚刚将 onKeyPress 添加到 TextField 并检查按下的键是否等于 Enter

<TextField
    margin="normal"
    required
    fullWidth
    id="title"
    label="Title"
    name="title"
    autoComplete="title"
    onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }} //<----
    autoFocus
/>

反应：检查表单提交时按下的键

React: check the pressed key on form submit

forms

events

node.js

reactjs

material-ui