javascript - 单击时清除闪电输入和闪电文本区域？

Question

单击“取消”按钮时，希望重置标有“名称”和“描述”的两个文本字段。但是，我收到错误“[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();
}

Answer 1

在闪电输入中声明类并尝试以下代码：

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