react 使用ref如何获取form表单数据

在 React 中，你可以使用 ref 来获取表单数据。下面是一个示例，展示了如何使用 ref 来获取表单数据：

import React, { useRef } from 'react';

const YourComponent = () => {
  const inputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData.entries());
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
};

在上述代码中，我们首先创建了一个名为 `inputRef` 的 ref 对象，然后将其与输入框关联。当表单被提交时，我们阻止默认的表单提交行为，并使用 `FormData` 对象来获取表单数据。通过使用 `Object.fromEntries()` 方法将 `formData.entries()` 转换为对象，我们可以获得一个包含表单数据的对象。

在 `handleSubmit` 函数中，你可以对表单数据进行进一步的处理或提交到后端。

请注意，这只是一个简单的示例，你可以根据实际需求和表单结构进行相应的调整。另外，如果需要获取多个表单元素的值，你可以为每个表单元素创建一个对应的 ref 对象，并在需要的地方访问它们。

希望这个示例可以帮助你理解如何使用 ref 来获取表单数据。如果你有任何进一步的问题，请随时提问。