如果我单击按钮，如何删除输入字段？

问题描述

我有一个表单，其中的输入字段可以这样工作：

如果有人写东西，然后单击输入字段附近的“添加”按钮，则该“东西”将添加到下面的元素列表中。

<input type="text" name="_element" placeholder='Type something' @change=${this.onPropChange} required>
<button type="button" name="element" @click=${this.onChange}>Add</button>

元素列表：

<div>
   ${this.value.elements && this.value.elements.map((element) => {
        return html`
                  <li>
                    <span class="label" style = "font-weight: bold;">Element: </span>
                    <span>${element}</span>
                  </li>
        ` 
     })
   } 
</div>

onChange函数：

onChange(e) {
        
        switch (e.target.getAttribute('name')){
            case '_element':
            this._element = e.target.value;
            break;
            case 'element':

              this.value = {...this.value,elements: [...this.value.elements||'']};
              this.value.elements.push(this._element);
              this._element='';
                         
            break;
   }
}

我希望当有人单击“添加”按钮时，输入字段中写的“内容”被清除。 我不能使用“提交”按钮或输入类型=“提交”。

存在吗？

谢谢！

解决方法

您可以扩展onChange函数来查找输入字段，并在每次单击按钮时将其占位符值设置为''空字符串。

在输入标签中设置一个ID，例如：

<input id='input_field' type="text" name="_element" placeholder='Type something' @change=${this.onPropChange} required>

如果我正确的话，像这样扩展您的onChange函数可能会有所帮助：

const element = document.getElementById('input_field');
element.value = '';