Better way to uncontrolled components?

Hi, in the documentation for uncontrolled components it is shown that we could use ref to access the values in the form, it is not specified why we shouldn't use this approach instead:

const App = () => {
  const file = useRef()
  const submit = (e) => {
    e.preventDefault()
    const form = new FormData(e.target)
    form.append('archivo', file.current.files[0])
    console.log(Array.from(form))
    // even better:
    Object.fromEntries(Array.from(form))
  }

  return (
    <form onSubmit={submit}>
      <div>
        <span>lala</span>
        <input defaultValue='my value' type='text' name='field' />
        <input type='file' ref={file} />
      </div>
      <input type='submit' value='Enviar' />
    </form>
  )
}

I think it's way cleaner as we only have to focus one one potential value, an input of type file. Is there a reason to not use it?

从 content/docs/uncontrolled-components.md 开始，尤其查看描述 refs 和表单值的部分，并审阅链接的示例。在文档中明确说明是否应使用所提出的 FormData 和 file-ref 方法，以及原因，然后确认页面是否对非受控表单给出了明确建议。