React Ref Form onSubmit 处理程序未触发

React是一种流行的JavaScript库，用于构建用户界面。它使用组件化的方式来管理UI的各个部分，并通过虚拟DOM（Virtual DOM）来提高性能。在React中，我们可以使用Ref来引用组件或DOM元素，并进行操作。本文将探讨在React中使用Ref处理表单的提交事件时，可能出现的问题，并提供解决方案。

jsx
import React, { useRef } from 'react';
function MyForm() {
  const formRef = useRef(null);
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted!');
  };
  return (
    
      
      Submit
    
  );
}

jsx
import React, { useRef } from 'react';
function MyForm() {
  const formRef = useRef(null);
  const handleSubmit = (event) => {
    event.preventDefault(); // 阻止表单的默认提交行为
    console.log('Form submitted!');
  };
  return (
    
      
      Submit
    
  );
}

jsx
import React, { useRef } from 'react';
class MyForm extends React.Component {
  formRef = React.createRef();
  handleSubmit(event) {
    event.preventDefault();
    console.log('Form submitted!');
  }
  render() {
    return (
      
        
        Submit
      
    );
  }
}