React中点击按钮显示textarea并自动激活输入的实现方法

绝对可以实现！这种需求在React里处理起来很直观，核心就是结合状态控制输入框的显示，再自动触发输入框的聚焦事件。我给你两种实用的方案，都是日常开发里常用的：

方案一：结合useRef和定时器（快速上手） #

这个方案逻辑简单，适合快速实现：

• 用useState管理textarea的显示/隐藏状态
• 用useRef创建一个指向textarea的引用，方便后续操作DOM
• 点击按钮时，先切换显示状态为true，再利用定时器确保textarea渲染完成后调用focus()

import { useState, useRef } from 'react';

function TextareaAutoFocus() {
  // 控制输入框显示的状态
  const [showTextarea, setShowTextarea] = useState(false);
  // 指向textarea的引用
  const textareaRef = useRef(null);

  const handleActivateTextarea = () => {
    setShowTextarea(true);
    // React状态更新是异步的，定时器让我们等到DOM更新后再聚焦
    setTimeout(() => {
      // 可选链操作符避免null报错
      textareaRef.current?.focus();
    }, 0);
  };

  return (
    <div style={{ padding: '20px' }}>
      <button onClick={handleActivateTextarea}>点击显示并开始输入</button>
      {/* 状态为true时渲染textarea */}
      {showTextarea && (
        <textarea
          ref={textareaRef}
          style={{ marginTop: '10px', padding: '8px' }}
          placeholder="现在直接敲键盘就能输入啦！"
        />
      )}
    </div>
  );
}

export default TextareaAutoFocus;

方案二：使用useEffect监听状态变化（更优雅的React式写法） #

如果不想用定时器，可以用useEffect监听显示状态的变化，当状态变为true时自动聚焦，这是更符合React数据流的写法：

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

function TextareaAutoFocus() {
  const [showTextarea, setShowTextarea] = useState(false);
  const textareaRef = useRef(null);

  // 监听showTextarea的变化，当它变为true时触发聚焦
  useEffect(() => {
    if (showTextarea && textareaRef.current) {
      textareaRef.current.focus();
    }
  }, [showTextarea]); // 依赖项只写showTextarea，确保只有状态变化时才触发

  const handleActivateTextarea = () => {
    setShowTextarea(true);
  };

  return (
    <div style={{ padding: '20px' }}>
      <button onClick={handleActivateTextarea}>点击显示并开始输入</button>
      {showTextarea && (
        <textarea
          ref={textareaRef}
          style={{ marginTop: '10px', padding: '8px' }}
          placeholder="直接输入吧！"
        />
      )}
    </div>
  );
}

export default TextareaAutoFocus;

小提示 #

• 两种方案的核心都是ref的使用，它让我们能直接操作DOM元素的focus()方法
• 方案二的useEffect写法更推荐，因为它不需要依赖定时器，完全遵循React的状态更新逻辑
• 如果是类组件，思路类似：用createRef创建引用，在componentDidUpdate生命周期里判断状态变化后调用this.textareaRef.current.focus()

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