javascript - 语义 UI 多重搜索下拉菜单 - onRemove 不删除标签

Question

我正在一个项目中使用语义 UI，但我遇到了一个小问题。

在我的多个搜索下拉列表中，我希望能够删除标签并在执行此操作时执行回调函数。

回调函数工作正常，但是单击十字时标签不会被删除。它只是停留在那里，就好像我选择了它一样。

我也在这个项目中使用 Angular JS，所以这里是下拉菜单的指令:

app.directive('dropdownSearchPersonalities', function () {
    return {
        restrict : 'A',
        link : function (scope, elem, attrs) {
            var personalitiesLength = scope.student.personalities.length;
            var studentPersonalities = [];

            for(var i = 0; i < personalitiesLength; i++) {
                studentPersonalities[i] = scope.student.personalities[i].name;
            }

            $(elem).dropdown({
                allowAdditions : true,
                onAdd: function (value) {
                    if(personalitiesLength) {
                        if($.inArray(value, studentPersonalities) != -1)
                            return;
                        else
                            scope.addPersonality(value, scope.studentId);
                    } else {
                        scope.addPersonality(value, scope.studentId);
                    }
                },
                onRemove: function (value, text, choice) {
                    scope.removePersonality(value, scope.studentId);
                }
            });

            $(elem).dropdown('set selected', studentPersonalities);
        }
    }
});

我再说一遍，唯一不起作用的是标签没有被删除，如果我刷新页面，本来要删除的标签就会消失。

这是尝试删除时的外观图像:

光标没有显示，但实际上位于十字图标上。

有人遇到过这个问题吗？我该如何解决？

非常感谢!

Answer 1

使用onChange，然后在您的输入(事件、数据)中，“数据”部分将检测您是否单击“x”或是否添加标签。例如:

onChange (event, data) {
  this.setState({
    data: { ...this.state.data, [data.name]: data.value}
  });
}

该值会自动更新您的数组并选择所有选项。