NodeJS 自动完成组件-在2个项目之间添加范围选择

xytpbqjk 于 5个月前发布在 Node.js

关注(0)|答案(1)|浏览(50)

我尝试了各种解决方案，但没有一个对我有效。我希望添加允许在两个项目之间进行广泛选择的功能，例如选择选项1，2，3，4，5，6和7时，按下按钮+ 2和按钮+ 6，导致选择2，3，4，5，6。我将感谢任何帮助。提前感谢您。
尝试的方法：

import React, { useState, useEffect } from "react";
import Select from "react-select";

const AramaSelect = ({ data, insertValues, name, label }) => {
  data.sort((a, b) => {
    const labelA = a.label.toLowerCase();
    const labelB = b.label.toLowerCase();
    if (labelA < labelB) return -1;
    if (labelA > labelB) return 1;
    return 0;
  });
  const [val, setVal] = useState([]);
  const [menuIsOpen, setMenuIsOpen] = useState(false);

  const handleKeyDown = (e) => {
    if (e.key === "Shift") {
      const focusedIndex = parseInt(e.target.dataset.optionIndex, 10);
      if (!isNaN(focusedIndex)) {
        const selectedOptions = [...val];
        const clickedOption = data[focusedIndex];

        if (
          !selectedOptions.find(
            (option) => option.value === clickedOption.value
          )
        ) {
          selectedOptions.push(clickedOption);
          setVal(selectedOptions);
          setMenuIsOpen(true);
        }
      }
    }
  };

  useEffect(() => {
    document.addEventListener("keydown", handleKeyDown);
    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [val]);

  const handleChange = (selectedOptions) => {
    const sortedSelectedOptions = selectedOptions.sort((a, b) => {
      const labelA = a.label.toLowerCase();
      const labelB = b.label.toLowerCase();
      if (labelA < labelB) return -1;
      if (labelA > labelB) return 1;
      return 0;
    });

    setVal(sortedSelectedOptions);
    setMenuIsOpen(true);

    const valEmails = sortedSelectedOptions.map((item) => item.value);
    insertValues(name, valEmails);
  };

  useEffect(() => {
    const valEmails = val.map((item) => item.value);
    insertValues(name, valEmails);
  }, [val]);

  return (
    <div style={{ width: 800, margin: "20px 0" }}>
      <Select
        options={data}
        isClearable
        isMulti
        menuIsOpen={menuIsOpen}
        onMenuOpen={() => setMenuIsOpen(true)}
        onMenuClose={() => setMenuIsOpen(false)}
        onChange={handleChange}
        value={val}
        placeholder={label}
      />
    </div>
  );
};

export default AramaSelect;

字符串

node.js

来源：https://stackoverflow.com/questions/77697075/autocomplete-component-adding-range-selection-between-2-items

1条答案

按热度按时间

de90aj5v1#

我解决了我的问题：

import React, { useState, useEffect } from "react";
import Select from "react-select";

    const AramaSelect = ({ data, insertValues, name, label }) => {
      data.sort((a, b) => {
        const labelA = a.label.toLowerCase();
        const labelB = b.label.toLowerCase();
        if (labelA < labelB) return -1;
        if (labelA > labelB) return 1;
        return 0;
      });
      const [val, setVal] = useState([]);
      const [menuIsOpen, setMenuIsOpen] = useState(false);
      const [limited, setLimited] = useState(false);
    
      const handleKeyDown = (e) => {
        if (e.keyCode === 16 && val.length === 2) {
          const [firstValue, secondValue] = limited;
    
          const firstIndex = data.findIndex(
            (item) => item.value === firstValue.value
          );
          const secondIndex = data.findIndex(
            (item) => item.value === secondValue.value
          );
    
          const rangeValues = data.slice(
            Math.min(firstIndex, secondIndex),
            Math.max(firstIndex, secondIndex) + 1
          );
    
          const updatedValues = data.filter((item) => rangeValues.includes(item));
    
          setVal(updatedValues);
          setFirstValueIndex(firstIndex);
          setSecondValueIndex(secondIndex);
          setIsSelectingRange(true);
        }
      };
    
      useEffect(() => {
        document.addEventListener("keydown", handleKeyDown);
        return () => {
          document.removeEventListener("keydown", handleKeyDown);
        };
      }, [val]);
    
      const handleChange = (selectedOptions) => {
        const limitedSelection = selectedOptions.slice(0, 2);
        setLimited(limitedSelection);
    
        const sortedSelectedOptions = selectedOptions.sort((a, b) => {
          const labelA = a.label.toLowerCase();
          const labelB = b.label.toLowerCase();
          if (labelA < labelB) return -1;
          if (labelA > labelB) return 1;
          return 0;
        });
    
        setVal(sortedSelectedOptions);
        setMenuIsOpen(true);
    
        const valEmails = sortedSelectedOptions.map((item) => item.value);
        insertValues(name, valEmails);
      };
    
      useEffect(() => {
        const valEmails = val.map((item) => item.value);
        insertValues(name, valEmails);
      }, [val]);
    
      return (
        <div style={{ width: 800, margin: "20px 0" }}>
          <Select
            options={data}
            isClearable
            isMulti
            menuIsOpen={menuIsOpen}
            onMenuOpen={() => setMenuIsOpen(true)}
            onMenuClose={() => setMenuIsOpen(false)}
            onChange={handleChange}
            value={val}
            placeholder={label}
          />
        </div>
      );
    };
    
    export default AramaSelect;

字符串
唯一的问题是，我选择我的数据第一次它的工作，但当我想选择更多的数据与它的范围，它不工作：

赞(0）回复(0）举报 5个月前

我来回答

NodeJS 自动完成组件-在2个项目之间添加范围选择

1条答案

相关问题

热门标签

最新问答