LWC：如何在单击 LWC 中的按钮时重置多选组合框的值

Question

在我的父组件中，我将子组件称为：

<c-multiselect-picklist multi-picklist-values={picklistValues} onselect={handleChange}
preselected-string={selectedPicklistValue} data-id="first"></c-multiselect-picklist>

JS：

picklistValues = {}; 
picklistOptions = [   { label: 'First', value: 'First'},
                        { label: 'Second', value: 'Second'},
                        { label: 'Third', value: 'Third'},
                        { label: 'Fourth', value: 'Fourth'}
                    ];

connectedCallback() {

this.picklistValues.label = '';
this.picklistValues.optionsToSelect = this.picklistOptions;

this.selectedPicklistValue = 'Some String';

}

在 UI 中，我有一个重置按钮，单击该按钮后，我想将多选子 LWC 重置为初始状态，而不进行任何选择。 如何在 LWC 中实现这一目标。

我尝试将 picklistValues 设置为 null，但闪电组合框仍然显示选定的选项。

Answer 1

正如已经评论过的，如果没有看到您的实际实现，很难判断什么对您的自定义组合框有效，但是我可以向您展示一个可行的解决方案：

多选组合框

我写了一篇关于如何创建 LWC 多选组合框的文章，可能会对您有所帮助：https://medium.com/@svirk/how-to-create-the-lwc-multi-select-combobox-that-salesforce -仍然缺失-c7bf3a2850dd

包括 JEST 单元测试和 JSDoc 注释的源代码可在此处获取：https://github.com/svirk/awesome-lwc-collection/tree/main/force-app/main/default/lwc/multiSelectCombobox

重置当前选择

要使用按钮等从外部重置当前选择，您只需添加一个重置方法并使用

@api

注释使其可供外部使用。如果您使用我的组件，此方法将如下所示：

@api
reset() {
  this.selectedItems = this.placeholder;
  this.currentOptions = [];
  this.selectedOptions = [];
  this.isLoaded = false;
}

然后，您可以通过查询选择器从相应的父组件调用重置方法：

this.template.querySelector('c-multi-select-combobox').reset();

Answer 2

我们可以调用整个组件而不是调用组件中的方法吗？