在React中通过event对象访问HTML节点是否为推荐的最佳实践？

在React开发中，获取表单输入值通常有两种常见的不受控组件实现方式： #

方式1：借助event对象直接访问表单节点 #

function MyComponent() {
  function handleSubmit(e) {
    e.preventDefault()
    // 通过event对象访问表单节点
    console.log(e.target.name.value)
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input name='name' />
      </form>
    </div>
  )
}

方式2：通过useRef绑定节点后取值 #

import { useRef } from 'react'

function MyComponent() {
  const textInput = useRef(null)

  function handleSubmit(e) {
    e.preventDefault()
    console.log(textInput.current.value)
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input ref={textInput} name='name' />
      </form>
    </div>
  )
}

核心问题解答 #

第一种借助event对象的写法确实更简洁，但不属于通用推荐的最佳实践，是否使用要看具体场景：

• 适用场景：如果是结构非常简单的表单，只需要在提交时一次性取所有值，没有实时校验、输入联动这类需求，用这个写法完全没问题，不会有额外的性能或逻辑问题。
• 不推荐作为通用方案的原因：
  • 强依赖表单元素的name属性，后续迭代如果修改了input的name属性、新增同name的表单项、或者把input抽离到单独的子组件中，很容易出现取值错误，排查成本比ref高很多——ref是直接绑定到目标元素的，只要绑定关系没写错就不会拿错值。
  • 适配场景有限：如果需要在提交之外的时机取值（比如输入过程中实时校验格式、根据输入内容动态禁用按钮），event的方式就无法实现，还是得切换为ref绑定或者受控组件方案。
  • 类型不安全：如果用TypeScript开发，e.target的表单元素集合是any类型，写错name属性不会在编译阶段报错，只能运行时才会发现问题；而ref可以明确指定绑定的元素类型，属性访问有完整的类型提示和校验，更稳妥。

选型建议 #

• 结构简单的一次性表单：用event对象的写法没问题，足够简洁。
• 逻辑复杂、有实时交互、后续会迭代、使用TypeScript开发的表单：优先选择ref绑定的方式，或者直接使用受控组件（通过useState绑定input的value和onChange事件），可维护性更高。
• 多字段、有大量校验联动逻辑的复杂表单：直接使用React Hook Form、Formik这类成熟的表单库，不需要手动处理取值逻辑，开发效率和可维护性都更高。

内容的提问来源于stack exchange，提问作者Diego Lope Loyola