Question

我想在程序中具有此功能：

我将有一个用户输入字段。当用户按下按钮时，它将被添加到列表中，并且输入将显示给用户。

问题是，如果用户需要，我想取消选择/删除那些输入。我无法实现这一目标。

这是我到目前为止编写的代码，我删除了问题范围内不必要的一些功能：

public class AddUserInput extends VerticalLayout{

    // The user input will be added to the this list
    // later, this list will be sent to the server for some verification
    private List<String> emails;

    private HorizontalLayout content;
    private VerticalLayout rows;
    // user input field
    private TextField emailField = new TextField("Enter email address");

    public AddUserInput() {
        content = new HorizontalLayout();
        rows = new VerticalLayout();

        content.setMargin(true);
        Button addToListButton= new Button("Add to list");
        addToListButton.addClickListener(new Button.ClickListener() {
            @Override
            public void buttonClick(Button.ClickEvent event) {
                // When the user clicks add to list button
                // The raw input will be added to the emails list
                // The UI component is added to 'rows' component
                rows.addComponent(addNewRow(emailField.getValue()));
            }
        });

        content.addComponents(emailField, addToListButton, rows);

        addComponent(content);
    }

    public Component addNewRow(String email){
        HorizontalLayout newRow = new HorizontalLayout();

        Button deleteRowButton = new Button("-");

        deleteRowButton.addClickListener(new Button.ClickListener() {
            @Override
            public void buttonClick(Button.ClickEvent event) {
                // I can delete from the UI by using the code below
                newRow.removeAllComponents();
                rows.removeComponent(newRow);
                // How to remove from the email list???

            }
        });

        emails.add(emailField.getValue());
        Label lastEmail = new Label(emailField.getValue());
        emailField.clear();
        newRow.addComponents(lastEmail,deleteRowButton);

        return newRow;
    }

}

有没有提供此功能的组件/库？

我只需要一个文本字段，然后将输入添加到列表中，如果用户愿意，则删除列表项。

上面代码的可视化：

Answer 1

您可以使用NativeSelect组件来管理输入的字符串。

我修改了您的AddUserInput组件以使用NativeSelect和相应的DataProvider：

public class AddUserInput extends VerticalLayout {

    private HorizontalLayout content = new HorizontalLayout();;
    private NativeSelect<String> select = new NativeSelect<>("The List");
    private ListDataProvider<String> dataProvider = DataProvider.ofCollection(new ArrayList<>());
    private Button addToListButton= new Button("Add to list");
    private Button deleteFromListButton = new Button("-");
    private TextField emailField = new TextField("Enter email address");

    public AddUserInput() {
        select.setVisibleItemCount(5);
        select.setWidth("100px");
        select.setDataProvider(dataProvider);
        select.setEmptySelectionAllowed(false);
        deleteFromListButton.setEnabled(false);
        content.setMargin(true);
        addToListButton.addClickListener(new Button.ClickListener() {
            @Override
            public void buttonClick(Button.ClickEvent event) {
                addEmailToList(emailField.getValue());
            }
        });
        deleteFromListButton.addClickListener(new Button.ClickListener() {
            @Override
            public void buttonClick(Button.ClickEvent clickEvent) {
                select.getSelectedItem().ifPresent(selectedItem -> removeSelectedEmailFromList());

            }
        });
        select.addValueChangeListener(new HasValue.ValueChangeListener<String>() {
            @Override
            public void valueChange(HasValue.ValueChangeEvent<String> valueChangeEvent) {
                deleteFromListButton.setEnabled(select.getSelectedItem().isPresent());
            }
        });

        content.addComponents(emailField, addToListButton, select, deleteFromListButton);

        addComponent(content);
    }

    private void addEmailToList(String email){
        dataProvider.getItems().add(email);
        select.getDataProvider().refreshAll();
        emailField.clear();
    }

    private void removeSelectedEmailFromList(){
        select.getSelectedItem().ifPresent(selectedItem -> dataProvider.getItems().remove(selectedItem));
        select.setSelectedItem(dataProvider.getItems().isEmpty() ? null : dataProvider.getItems().iterator().next());
        select.getDataProvider().refreshAll();
    }

}

如下所示：

对您来说这可能是一种选择吗？

Vaadin将值添加到列表

1 个答案: