在React中隐藏提交按钮后，如何提交表单

import React, { useRef } from 'react';

function HiddenSubmitForm() {
  const formRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault(); // 阻止默认的表单提交行为
    console.log('Form submitted!');
    // 这里可以添加你的表单处理逻辑，比如发送数据到服务器
  };

  const submitForm = () => {
    formRef.current.submit(); // 直接调用表单的submit方法
  };

  return (
    <div>
      <form ref={formRef} onSubmit={handleSubmit}>
        <input type="text" name="username" placeholder="Username" required />
        <input type="password" name="password" placeholder="Password" required />
        {/* 隐藏的提交按钮 */}
        <button type="submit" style={{ display: 'none' }}></button>
      </form>
      <button onClick={submitForm}>Submit Form</button>
    </div>
  );
}

export default HiddenSubmitForm;