如何避免回退聚焦表单输入时出现innerText赋值空指针错误？

问题场景：在表单输入框的change事件处理函数中，当聚焦输入框时点击页面回退按钮，会触发Cannot set properties of null (setting 'innerText')错误——原因是页面回退时组件可能已卸载，对应模板ref变为null。

最简洁的修复方式 #

直接在操作inputError前添加空值判断，无需针对单个输入框单独处理，两种写法任选：

方案1：可选链操作符（推荐，代码最简洁）

function clearInput(e, inputError) {
    e.target.classList.remove('is-invalid')
    inputError?.innerText = '' // 仅当inputError不为null/undefined时执行赋值
}

方案2：逻辑与运算符（兼容旧环境）

function clearInput(e, inputError) {
    e.target.classList.remove('is-invalid')
    inputError && (inputError.innerText = '')
}

补充优化（可选） #

如果想从根源上统一ref引用逻辑，可以把作者错误提示的span也改为模板ref绑定：

<span ref="authorError" class="text-danger errors"></span>

但上述空值判断的方法无需修改模板，更高效直接。

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