如何实现React自定义TextArea组件根据内容自动调整高度

这里分两种常用方案，你可以根据兼容需求选择：

方案1：纯CSS实现（优先推荐，实现成本最低） #

现在主流浏览器已经支持原生的内容自适应属性，不需要写任何JS逻辑：

1. 给你的textarea元素添加field-sizing: content样式即可，示例：

.form-control {
  /* 核心属性：高度跟随内容自动调整 */
  field-sizing: content;
  /* 可选配置：最小高度、最大高度限制 */
  min-height: 60px;
  max-height: 300px;
  /* 超过最大高度时显示滚动条 */
  overflow-y: auto;
  /* 避免盒模型导致的高度计算偏差 */
  box-sizing: border-box;
}

你可以直接把上述样式写到你的textStyle属性里，或者新增到全局/组件的样式文件中。该属性兼容Chrome 118+、Firefox 124+、Safari 17.4+，不需要兼容老旧浏览器的话首选这个方案。

方案2：JS动态计算实现（全浏览器兼容） #

如果需要兼容低版本浏览器，可以通过监听内容变化动态计算高度，修改你的组件代码如下：

1. 先给textarea添加ref绑定，方便获取DOM节点
2. 新增高度调整方法，在组件挂载、内容更新时触发
3. 可选增加最大高度限制，避免无限撑高页面

完整修改示例： #

class TextArea extends InputBase {
    // 组件挂载完成后初始化高度
    componentDidMount() {
        this.adjustHeight();
    }
    // 监听props或state的内容变化，更新高度
    componentDidUpdate(prevProps, prevState) {
        if (prevProps.value !== this.props.value || prevState.value !== this.state.value) {
            this.adjustHeight();
        }
    }
    // 高度调整核心方法
    adjustHeight = () => {
        const textarea = this.textareaEl;
        if (!textarea) return;
        // 先重置高度为auto，保证scrollHeight能获取到最新内容的实际高度
        textarea.style.height = 'auto';
        textarea.style.height = `${textarea.scrollHeight}px`;
    }
    // 你原有的onChange方法里可以补充调用adjustHeight，也可以直接放在componentDidUpdate里统一监听
    onChange = (e) => {
        // 你原有的逻辑不变
        // ...
        this.adjustHeight();
    }

    render() {
        const { label, placeholder, wrap, rows, cols, disabled, style, textStyle, textClass, value } = this.props;

        return (
            <div className={formClass} style={style}>
                {!!label && (<label className="control-label" htmlFor={this.id}>{label}</label>)}
                <textarea 
                    ref={el => this.textareaEl = el}
                    id={this.id} 
                    className={`form-control ${textClass}`} 
                    placeholder={placeholder} 
                    disabled={disabled} 
                    style={{
                        boxSizing: 'border-box',
                        minHeight: '60px',
                        maxHeight: '300px',
                        overflowY: 'auto',
                        ...textStyle
                    }}
                    rows={rows} 
                    cols={cols} 
                    wrap={wrap} 
                    value={this.state.value || ''}
                    onChange={this.onChange} 
                    onBlur={this.onBlur} 
                    onFocus={this.onFocus} 
                    onKeyPress={this.onKeyPresses} 
                    onKeyUp={this.onKeyUp}
                >
                    {value}
                </textarea>
            </div>
        );
    }
}

注意事项 #

• 如果不需要限制最大高度，可以去掉maxHeight和overflowY配置，textarea会一直跟随内容增高
• 确保textarea的box-sizing设为border-box，否则高度计算会包含额外的内边距、边框值，出现偏差

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