React.js中输入元素设置autoFocus时出现无效DOM属性警告如何解决

问题原因 #

React 对 DOM 属性采用驼峰命名规范，原生 HTML 的 autofocus 布尔属性，在 React 中的标准写法为 autoFocus。你之前的代码属性名误用了小写的 autofocus，且给布尔属性传了字符串值 "autoFocus"，不符合 React 语法规范，因此触发警告。

解决方案 #

方案1：直接修正属性写法

直接使用标准驼峰布尔属性写法即可，布尔值为 true 时可以省略属性值：

<textarea 
  className='title'
  autoFocus
  onChange={(e) => changeBill(e, 'title')} 
  value={bill?.title} 
  placeholder="Bill Title"
>
</textarea>

如果需要动态控制是否聚焦，也可以显式传布尔值：
autoFocus={需要聚焦的布尔条件}

如果修改后仍然出现警告，可按以下顺序排查：

• 确认属性拼写完全正确：autoFocus 第二个单词首字母F大写，无拼写错误
• 检查IDE保存自动修正、Eslint规则是否会强制把驼峰属性改为小写，调整对应规则即可
• 清除浏览器缓存、重启本地开发服务，避免热更新缓存导致修改未生效

方案2：使用ref手动触发聚焦（兼容性最优）

如果想要彻底规避该警告，同时避免部分场景下自动聚焦不生效的问题，可以通过ref手动控制聚焦：

// 先引入相关hooks
import { useRef, useEffect } from 'react'

// 组件内部逻辑
const BillComponent = () => {
  const titleTextareaRef = useRef(null)
  // 组件挂载后自动触发聚焦
  useEffect(() => {
    titleTextareaRef.current?.focus()
  }, [])

  return (
    <textarea 
      className='title'
      ref={titleTextareaRef}
      onChange={(e) => changeBill(e, 'title')} 
      value={bill?.title} 
      placeholder="Bill Title"
    >
    </textarea>
  )
}

该方案不需要设置autoFocus属性，不会触发语法警告，且聚焦时机完全可控。

内容的提问来源于stack exchange，提问作者Etch