如何在没有提交按钮的情况下提交表单？答案

【问题标题】：How to submit form on enter without submit button?如何在没有提交按钮的情况下提交表单？
【发布时间】：2020-10-20 06:29:33
【问题描述】：

我想在输入时提交我的表单，而不在 Antd 表单中添加按钮。有没有办法在 React 中做到这一点？

我考虑了仅隐藏按钮的解决方法，但认为这不是最好的方法。

【问题讨论】：

在您要按 Enter 的字段中附加一个 onKeyup 事件和event.keyCode === 13 之类的键码（我相信输入），然后提交表单。顺便说一句，请分享您的尝试。
请提供您尝试过的 Antd 表单示例代码

标签： javascript reactjs antd

【解决方案1】：

如果你想让它与 Antd 一起工作，参考文档中的 example 应该可以工作。

既然你提到了 React，下面的代码应该在按下 enter 时提交表单。诀窍是将 onSubmit 属性添加到表单标签。

export default class Module extends React.Component {

  constructor() {
    super();
    this.state = {}
    this.handleSubmit = this.handleSubmit.bind(this);

  }

  handleSubmit(e) {
    e.preventDefault();
    //your code
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        //form code
      </form>
    );
  }

}

【讨论】：

【解决方案2】：

将antd Form的ref存储在你的组件中（用于访问提交方法）
在表单中添加onKeyUp
如果您希望 onKeyUp 作用于整个 Form 而不仅仅是输入，则需要将 tabIndex={0} 添加到 Form
输入 keyCode 是 13 所以你需要像这样处理KeyUp：

const SimpleForm = () => {
  const ref = useRef();

  function handleKeyUp(event) {
    // Enter
    if (event.keyCode === 13) {
      ref.current.submit();
    }
  }

  return (
    <Form ref={ref} onKeyUp={handleKeyUp} tabIndex={0}>
      <Form.Item
        label="Username"
        name="username"
        rules={[
          {
            required: true,
            message: "Please input your username!"
          }
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[
          {
            required: true,
            message: "Please input your password!"
          }
        ]}
      >
        <Input.Password />
      </Form.Item>
    </Form>
  );
};

或者您可以像这样在 window 上收听 keyup 事件：

const SimpleForm = () => {
 const ref = useRef();
  function handleKeyUp(event) {
    if (event.keyCode === 13) {
      ref.current.submit();
    }
  }

  useEffect(() => {
    window.addEventListener("keyup", handleKeyUp);
    return () => {
      window.removeEventListener("keyup", handleKeyUp);
    };
  }, []);

  return (
    <Form ref={ref}>
    .
    .
    .

  );
};

【讨论】：

可以，但是表单刷新了整个页面。

【解决方案3】：

使用 onSubmit 事件处理程序！如果您不想要一个按钮来提交表单。例如

提交功能

handleSubmit(e){
e.preventDefault()
// your form submission logic
}

在表单上使用 onSubmit

<form onSubmit={this.handleSubmit}>

</form>

【讨论】：

【解决方案4】：

export default class Module extends React.Component {
  constructor() {
    super();
    this.state = {}
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    //your code
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        //form code
        // Hide this button using CSS
       <button type="submit">Submit</button>
      </form>
    );
  }

这可能会奏效。默认情况下，里面的 submit 按钮会捕获 enter 按键，因此您不必做任何激进的事情，只需在表单中放置一个 submit 按钮并隐藏那个按钮，在输入键上它会自动提交表单。

【讨论】：

【解决方案5】：

submitFunction=(event)=>{
console.log('form submitted.')

}

在渲染函数中：

 < form onSubmit={this.submitFunction}>
   // input...
 < /form>

【讨论】：

【解决方案6】：

onSubmit 在 antd v4 中不可用。请改用onKeyPress。

<Form
  form={form}
  onFinish={console.log}
  onKeyPress={(e) => {
    if (e.key === "Enter") {
      form.submit();
    }
  }}
>
    //
</Form>

【讨论】：

OnKeyPress 已弃用。

【解决方案7】：

您应该在输入中使用 onKeyUp 道具

const handleSubmit = () => {
// function body for submitting data
}

<input
  onKeyUp={(ev) => {
              if (ev.keyCode === 13) {
                handleSubmit();
              }
            }}
/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【讨论】：

您的 sn-p 有错误。