React无状态函数组件中如何实现输入框聚焦（解决ref禁用问题）

嘿，这个问题我太熟了！你碰到的报错是因为无状态函数组件（也就是现在常说的函数组件）确实不能用老式的字符串refs，而且你写的componentWillMount在函数组件里也没法用——毕竟函数组件没有类组件那些生命周期钩子。不过不用ref也能实现挂载时聚焦的需求，甚至还有更规范的ref用法可以解决动态聚焦的场景，下面给你详细说：

方案1：用autoFocus属性实现自动聚焦（无需ref，最简便） #

如果你的需求只是组件加载完成后立刻聚焦这个输入框，那完全不用折腾ref，直接给TextField加上autoFocus属性就行：

<TextField 
  onChange={props.onChangeTextField} 
  style={styles.textField} 
  value={props.existingValue} 
  fullWidth={true} 
  autoFocus={true} 
/>

这个属性是HTML输入元素原生支持的，Material-UI的TextField也封装了这个属性，组件挂载后会自动把焦点移到这个输入框上，完美匹配你的初始需求。

方案2：用useRef Hook实现动态聚焦（适合复杂场景） #

如果你的需求不止是挂载时聚焦，比如需要在某个按钮点击、数据加载完成等事件触发后再聚焦，那可以用React 16.8+推出的useRef Hook，这是函数组件里官方推荐的ref用法，不会报错：

import React, { useRef, useEffect } from 'react';

const YourComponent = (props) => {
  // 创建ref对象
  const questionInputRef = useRef(null);

  // 模拟挂载后聚焦的逻辑，替代原来的componentWillMount
  useEffect(() => {
    // 确保ref已经关联到真实DOM元素
    if (questionInputRef.current) {
      questionInputRef.current.focus();
      console.log('test');
    }
  }, []); // 空依赖数组表示这个effect只在组件挂载时执行一次

  return (
    <TextField 
      onChange={props.onChangeTextField} 
      // 把ref对象传递给组件
      ref={questionInputRef} 
      style={styles.textField} 
      value={props.existingValue} 
      fullWidth={true} 
    />
  );
};

这里要注意几个点：

• 不能再用ref="questionInput"这种字符串形式的ref，函数组件只支持传递ref对象或者回调函数
• 用useEffect替代componentWillMount，因为函数组件没有类组件的生命周期方法，而且componentWillMount现在已经被React官方标记为过时API了
• useEffect的空依赖数组保证了聚焦逻辑只在组件挂载时执行一次，和你原来的componentWillMount意图一致

为什么你之前的代码会报错？ #

Stateless function components cannot have refs.

这个错误的原因是：

1. 你在函数组件里使用了字符串类型的ref，这种ref方式在函数组件里是不被允许的（类组件里现在也不推荐用了）
2. 你试图在函数组件里使用类组件的生命周期方法componentWillMount，函数组件没有这些方法，自然会报错

总结一下：如果只是简单的挂载时聚焦，autoFocus是最优解；如果需要动态控制聚焦，用useRef配合useEffect是完全合规的做法，也能实现你想要的效果。

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