Question

我想在Enter上提交表单，而无需在Antd表单内添加按钮。在React中有什么方法可以做到这一点？

我考虑仅隐藏按钮的解决方法，但不认为这是实现此目的的最佳方法。

Answer 1

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

}

渲染功能中的：

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

Answer 2

如果您想使其与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>
    );
  }

}

Answer 3

将antd表单的 ref 存储在组件内（用于访问 submit方法）
将onKeyUp添加到表单
如果您想在整个Form上而不是仅在输入上使用onKeyUp，则需要向表单中添加tabIndex={0}
输入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>
  );
};

或者您也可以在窗口上收听键入事件：

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

  );
};

Answer 4

使用onSubmit事件处理程序！如果您不希望按钮提交表单。例如

提交功能

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

在表单上使用onSubmit

<form onSubmit={this.handleSubmit}>

</form>

Answer 5

Project.AddExistingItem

可能会起作用。默认情况下，内部的 submit 按钮会捕获 enter 键，因此您无需做任何激进的事情，只需将 submit 按钮放入表单并隐藏该按钮，请按Enter键，它将自动提交表单。

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

5 个答案: