javascript - 单击时清除闪电输入和闪电文本区域?
问题描述
单击“取消”按钮时,希望重置标有“名称”和“描述”的两个文本字段。但是,我收到错误“[document.getElementById(...) is null]”。经过一番研究,我了解到当 JS 与 HTML 在同一个文件中时会出现此错误,但此 JS 在单独的文件中并嵌套在按钮单击中,因此字段已经存在。我尝试将值设置为空白字符串,以及使用 .reset() 方法重置它。
的HTML:
<lightning-input label="Name" id="nameInput" name="nameInput"></lightning-input>
<lightning-textarea label="Description" id="descriptionInput" name="descriptionInput"></lightning-textarea>
<lightning-button label="Cancel" onclick={cancelStep}></lightning-button>
JS:
cancelStep(){
document.getElementById('nameInput').value = '';
document.getElementById('descriptionInput').value = '';
//document.getElementById('nameInput').reset();
//document.getElementById('descriptionInput').reset();
}
解决方案
在闪电输入中声明类并尝试以下代码:
this.template.querySelector('nameInput').reset();
推荐阅读
- javascript - Object.assign 与对象扩展运算符
- reactjs - 如何在 React-Redux 中将类组件更改为功能组件?
- asp.net-core - 在 Blazor 中使用带有 AddDbContextFactory 的标识
- react-native - 如何从浏览器中的浏览器中打开intent://链接反应原生?
- css - 如何使图像悬停在每一行中?
- angular - 为什么组件/应用程序被无情地“检查”而没有任何事情发生?
- datatables - 如何将指定的列设置为子行,以便我们可以在引导数据表中增加其他列的宽度?
- spring-integration - Spring Integration - 聚合优先级通道
- php - 构建自定义 Elementor Widget-Wordpress(未显示)
- javascript - 检测浏览器是否有自动隐藏 URL 栏