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

Question

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

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

Answer 1

1. 将 antd 表单的ref存储在您的组件中（用于访问提交方法）
2. 将onKeyUp添加到表单
3. 如果您想 onKeyUp 处理整个表单而不仅仅是输入，您需要将tabIndex={0}添加到表单
4. 输入 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>
  );
};

或者您可以像这样在窗口上收听 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}>
    .
    .
    .

  );
};

Answer 2

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

}

在渲染函数中：

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

Answer 3

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

既然你提到了 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 4

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

提交功能

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

在表单上使用 onSubmit

<form onSubmit={this.handleSubmit}>

</form>

Answer 5

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>
    );
  }

可能这会奏效。 默认情况下，内部的提交按钮会捕获回车键，因此您不必做任何激进的事情，只需在表单中放置一个提交按钮并隐藏该按钮，按回车键它会自动提交表单。

Answer 6

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

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

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