如何不使用onChange等监听器获取组件元素并在useEffect中调用auto_grow

核心思路：用useRef获取DOM元素，在useEffect中直接调用函数处理 #

React里推荐用useRef获取DOM元素，比document.getElementById更适配组件生命周期，能避免元素未挂载或引用失效的问题。同时要调整auto_grow函数，让它直接接收DOM元素而非事件对象。

修改后的代码 #

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

function ChatInput(props){
    const [text, setText]=useState(''); // 初始化空字符串，避免undefined状态
    const textareaRef = useRef(null); // 创建ref关联textarea元素

    // 改造auto_grow，直接接收DOM元素作为参数
    function auto_grow(element){
        if (!element) return; // 防止元素不存在时报错
        element.style.height = "5px";
        element.style.height = `${element.scrollHeight}px`;
    }

    useEffect(()=>{
        setText(props.answer);
        // 延迟调用确保DOM已更新文本，保证scrollHeight准确
        setTimeout(() => {
            auto_grow(textareaRef.current);
        }, 0);
    },[props.answer])

    // 组件挂载时初始化高度
    useEffect(()=>{
        auto_grow(textareaRef.current);
    },[])

    return(
        <>
        <Container style={{paddingTop:'.5rem'}}>
            <InputGroup>
                <InputGroup.Text>Bot</InputGroup.Text>
                {/* 通过ref关联textarea，移除无效的onLoad事件 */}
                <Form.Control 
                    ref={textareaRef}
                    style={textareaStyle} 
                    as="textarea" 
                    value={text} 
                    aria-label="Chat Input"
                />
            </InputGroup>
        </Container>
        </>
    )
}

const textareaStyle = {
    resize: "none",
    overflow: "hidden",
    minHeight: "50px",
    maxHeight: "1000px"
}

export default ChatInput;

关键说明 #

• useRef的优势：textareaRef.current会直接指向对应的textarea DOM元素，组件挂载后即可稳定获取，无需通过事件传递元素。
• document.getElementById的问题：React组件渲染是异步的，useEffect执行时可能元素还未完成挂载，导致获取到null或旧元素；而useRef会随组件生命周期自动更新关联的DOM元素。
• scrollHeight的误区：之前的错误是因为auto_grow原本接收的是事件对象，而用document.getElementById拿到的是DOM元素本身，直接访问element.scrollHeight即可，不需要.target。
• 延迟调用的必要性：设置text后DOM不会立即更新，用setTimeout把高度调整逻辑放到下一次事件循环，确保文本已经渲染到textarea中，此时scrollHeight的值才准确。

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