Блог

В моем React-hooks случае я не могу ограничить свой выбор элементов 2, приведенный ниже код в данный момент не проверяется. Хотел бы отобразить сообщение о проверке «Выбрано максимальное количество элементов». В чем может быть причина ?

https://codesandbox.io/s/kind-brown-n8ki4?file=/src/App.js:463-492

 import React, { useRef, useEffect, useState } from "react";
import { Link, useHistory } from "react-router-dom";
import Multiselect from "multiselect-react-dropdown";

const options = [
  { key: "Apple", id: 1 },
  { key: "Bags", id: 2 },
  { key: "Coat", id: 3 },
  { key: "Drum", id: 4 }
];

const App = () => {
  const maxOptions = 2;
  const [selectedOption, setSelectedOption] = useState([]);
  const handleTypeSelect = (e) => {
    setSelectedOption(e);
  };

  const onNominate = () => {
    alert("hello");
    // ...
  };

  return (
    <div className="App">
      <div className="navbar-nav">
        <div className="leftNavItem"></div>
      </div>
      <h1>Maximum 2 selections</h1>
      <div className="nomineeSelectBox">
        <Multiselect
          onChange={handleTypeSelect}
          options={selectedOption.length === maxOptions ? [] : options}
          displayValue="key"
          showCheckbox={true}
          noOptionsMessage={() => {
            return selectedOption.length === maxOptions
              ? "You have reached the max options value"
              : "No options available";
          }}
        />
      </div>
      <div className="nominateButton">
        <input type="button" value="Next" onClick={onNominate} />
      </div>
    </div>
  );
};

export default App;
 

У вас есть некоторые проблемы в коде, чтобы Multiselect он работал правильно:

1. Вам не нужно onSelect событие multiselect-react-dropdown компонента onChange .
2. selectedOption.length === maxOptions ? [] следует изменить на selectedOption.length 1 === maxOptions ? []
3. Чтобы отобразить правильное сообщение для выбранных параметров «Нет», вам необходимо изменить noOptionsMessage на emptyRecordMsg

Итак, конечный результат должен быть:

  <Multiselect
          onSelect={handleTypeSelect}
          onRemove={handleTypeRemove}
          // onChange={handleTypeSelect}
          options={selectedOption.length   1 === maxOptions ? [] : options}
          displayValue="key"
          showCheckbox={true}
          emptyRecordMsg={"You have reached the max options value"}
        />
 

Кроме того, вы должны изменить handleTypeSelect на :

   const handleTypeSelect = (e) => {
    const copy = [...selectedOption];
    copy.push(e);
    setSelectedOption(copy);
  };
 

Кроме того, вам нужно обработать множественный выбор, когда элемент удаляется с onRemove помощью метода:

   const handleTypeRemove = (e) => {
    const copy = [...selectedOption];
    let index = copy.indexOf(e);
    copy.splice(index, 1);
    setSelectedOption(copy);
  };
 

Вы всегда устанавливаете только один вариант. Таким образом, у вас всегда есть один выбранный вариант. Что вам нужно сделать, так это

  const handleTypeSelect = (e) => {
setSelectedOption(prevArr => [...prevArr, e]); };
 

Сделайте это так, чтобы вы могли выбрать опцию, выбранную ранее.