ReactJS TextField组件内容更新时自动滚动到底部异常问题排查

你的自动滚动不生效主要是两个常见的React和Material UI特性导致的：

• setState是异步更新API，调用后不会立刻更新状态和DOM，你在setState后立刻操作滚动，此时文本内容还没更新，获取到的scrollHeight还是更新前的旧值，滚动位置自然不会正确对齐到底部。
• Material UI的TextField组件的普通ref指向的是外层封装的组件实例，不是内部的原生textareaDOM元素，直接通过this.textLog.current读取滚动属性是无效的。

按以下步骤修改代码即可：

1. 替换ref绑定属性 #

将TextField的ref属性改为inputRef，inputRef是Material UI提供的专门用于绑定原生输入DOM的属性：

<TextField
       id="outlined-multiline-static"
       multiline
       rows={12}
       className={classes.fieldHeight}
       inputRef={this.textLog}
       value={this.state.textArea}
/>

2. 将滚动逻辑放到setState的回调中 #

setState的第二个参数是状态更新、DOM重绘完成后才会触发的回调函数，把滚动逻辑放到这里才能拿到最新的内容高度：

修正componentDidUpdate逻辑 #

componentDidUpdate(prevProps, prevState, snapshot) {
    /* 其余无关代码保留 */
    if (prevProps.response !== this.props.response) {
        let currentText = this.state.textArea;
        currentText += timeToDisplay + "   Quinly: " + this.props.response + '\n';
        this.setState({textArea:currentText}, () => {
            // 状态更新完成后执行滚动
            if (this.textLog.current) {
                this.textLog.current.scrollTop = this.textLog.current.scrollHeight;
            }
        })
    }
}

修正setTextBox逻辑 #

setTextBox = event => {
    let currentText = this.state.textArea;
    currentText += timeToDisplay + "   User: " + this.state.inputText + '\n';
    this.sendCommand(this.state.inputText)
    this.setState({inputText: ""})
    currentText += timeToDisplay + "   Quinly: " + this.props.response + '\n';
    this.setState({textArea:currentText}, () => {
        // 状态更新完成后执行滚动
        if (this.textLog.current) {
            this.textLog.current.scrollTop = this.textLog.current.scrollHeight;
        }
    })
}

如果修改后仍然不生效，可以检查以下配置：

• 确认自定义样式classes.fieldHeight没有覆盖textarea的overflow-y属性，该属性需要为auto或scroll才会生成滚动条。
• 如果消息更新频率很高，可以在回调中用requestAnimationFrame包裹滚动逻辑，确保浏览器渲染完成后执行：

this.setState({textArea:currentText}, () => {
    requestAnimationFrame(() => {
        if (this.textLog.current) {
            this.textLog.current.scrollTop = this.textLog.current.scrollHeight;
        }
    })
})

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