清除点击时的闪电输入和闪电文本区域吗？

问题描述

当单击“取消”按钮时，希望重置两个标记为“名称”和“描述”的文本字段。但是，我得到了错误'[document.getElementById（...）为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();
}

解决方法

在 Lightning-input 中声明类并尝试下面的代码：

this.template.querySelector('nameInput').reset();