Выбрать: Ограничить количество выбранных опций - PullRequest
0 голосов
/ 20 февраля 2020

Я использую Компонент выбора ANT Design в режиме множественного выбора. После того, как выбраны две опции (см. Скриншот), я бы хотел запретить выбор. Поле не должно быть отключено, так что вы можете отменить выбор опции и выбрать другую.

Я пробовал событие onFocus, но оно не предоставляет событие, которое я мог бы использовать для preventDefault или иначе не открывать выпадающий список. Я также пытался добавить ссылку и вызывать blur() всякий раз, когда вызывается событие onFocus. Это закрывает раскрывающийся список, но он все еще виден на секунду.

Кто-нибудь знает способ достижения sh этого?

enter image description here

1 Ответ

0 голосов
/ 21 февраля 2020

При простом условии вы можете отключить другие параметры, если выбрано 3 или более параметров. Установите состояние с выбранными параметрами, используя onChange, и при отображении параметров отключите их в зависимости от условия.

https://codesandbox.io/s/happy-leftpad-lu84g

Пример кода

import React, { useState } from "react";
import { Select } from "antd";

const { Option } = Select;

const opts = ["a11", "b12", "c13", "d14", "e15"];

const Selectmultiple = () => {
  const [optionsSelected, setOptionsSelected] = useState([]);

  const handleChange = value => {
    console.log(`selected ${value}`);
    setOptionsSelected(value);
  };
  return (
    <div>
      <Select
        mode="multiple"
        style={{ width: "100%" }}
        placeholder="Please select"
        onChange={handleChange}
      >
        {opts.map(item => (
          <Option
            disabled={
              optionsSelected.length > 1
                ? optionsSelected.includes(item)
                  ? false
                  : true
                : false
            }
            key={item}
          >
            {item}
          </Option>
        ))}
      </Select>
    </div>
  );
};
...