Comment obtenir plusieurs valeurs d'éléments de liste sélectionnés dans la liste déroulante ?

PRANAV

Besoin d'obtenir toutes les valeurs sélectionnées dans la liste déroulante sans supprimer la valeur précédemment chargée, veuillez aider

const [selectedItem, setSelectedItem] = useState("Select...");
<Dropdown className="dropdown-groove">
        <Dropdown.Toggle variant="outline-secondary " id="dropdown-basic">
          {selectedItem}
          <label className="dropdown-label">Dropdown label</label>
        </Dropdown.Toggle>

        <Dropdown.Menu>
          <Dropdown.Item href="#/action-1">
            {" "}
            <Form.Check
              onClick={(e) => {
                setSelectedItem("List A");
                e.stopPropagation();
              }}
              className="checkbox-groove"
              inline
              label="List Item 1"
              name="group1"
              type="checkbox"
            />{" "}
          </Dropdown.Item>
          <Dropdown.Item href="#/action-2">
            {" "}
            <Form.Check
              onClick={(e) => {
                setSelectedItem("List b");
                e.stopPropagation();
              }}
              className="checkbox-groove"
              inline
              label="List Item 2"
              name="group1"
              type="checkbox"
            />{" "}
          </Dropdown.Item>
</Dropdown.Menu>
</Dropdown>

https://codesandbox.io/s/dropdown-with-checkboxs-nvw3hz

Yucheng

Vous pouvez déclarer une fonction après setState à la ligne 6

function toggleCheckbox(addItem) {
    if (selectedItem.indexOf(addItem) < 0) {
      setSelectedItem(`${selectedItem} ${addItem}`);
    } else {
      setSelectedItem(selectedItem.replace(addItem, ""));
    }
  }

et remplacer setSelectedItem("List A");par toggleCheckbox("List A");puis, Liste b & c est la même façon de remplacer.

boîte à code

Articles connexes