如何自定义 Select 以显示以逗号分隔的选定选项？反应选择答案

【问题标题】：How to customize Select to display selected options separated by comma? react-select如何自定义 Select 以显示以逗号分隔的选定选项？反应选择
【发布时间】：2021-01-04 10:10:01
【问题描述】：

我尝试从 react-select 库中自定义 Select 组件。我使用span 元素自定义了multiSelectValue，并在标签中添加了逗号。但它不适用于输入。在下拉列表中选择项目时，它按预期工作。但是当我尝试为搜索选项输入值时，输入是焦点，span 项目向左移动，结果字段变为空。

多选

export default function App() {
  const [values, setValues] = useState([]);

  return (
    <div className="root">
      <Select
        styles={styles}
        isSearchable
        isMulti
        getOptionValue={(option) => option["value"]}
        options={options}
        value={values}
        onChange={(options) => {
          setValues(() => options);
        }}
        components={{
          MultiValue: CustomMultiValue
        }}
      />
    </div>
  );
}

自定义选择值

function CustomMultiValue(props) {
  const { getValue, data } = props;

  const selectedOptions = getValue();
  const currentOptionIdx = selectedOptions.findIndex(
    (option) => option.value === data.value
  );

  return (
    <span>
      {data.label}
      {currentOptionIdx === selectedOptions.length - 1 ? "" : ", "}
    </span>
  );
}

沙盒项目https://codesandbox.io/s/boring-knuth-kfo1e?file=/src/CustomMultiValue.js

【问题讨论】：

标签： javascript reactjs react-select

【解决方案1】：

我认为您的代码没有任何问题。也许您应该尝试增加Select 的宽度，这样您就可以看到所有其他被剪裁在您的代码框中的多值。

const width = "500px";
const styles = {
  control: (provided) => ({
    ...provided,
    width
  }),
  menu: (provided) => ({
    ...provided,
    width
  }),
  ...
};

【讨论】：

【解决方案2】：

我找到了解决方案。要实现它需要做 2 个操作：

选择打开时更改valeContainer的溢出样式
菜单关闭时向左滚动

当菜单打开时使用overflow:unset - 这样输入将在所选值的末尾正确显示当菜单关闭时，使用overflow:ellipsis 显示第一个选定的值并对其进行切片

  valueContainer: (provided, state) => {
    const disableOverflow =
      state.selectProps.isSearchable && state.selectProps.menuIsOpen;

    return {
      whiteSpace: "nowrap",
      textOverflow: disableOverflow ? "unset" : "ellipsis",
      overflow: "hidden",
      flex: "1 1 0%",
      position: "relative"
    };
  },

要向左滚动需要使用自定义ValueContainer 并将ref 传递给该容器。检查 menuIsOpen 何时更改为 false 并在此时向左滚动。

function CustomMultiValueContainer(props) {
  const {
    selectProps: { menuIsOpen }
  } = props;
  const containerRef = useRef(null);
  const styles = props.getStyles("valueContainer", props);

  useEffect(() => {
    if (!menuIsOpen) {
      if (containerRef && containerRef.current) {
        containerRef.current.scrollLeft = 0;
      }
    }
  }, [menuIsOpen]);

  return (
    <div ref={containerRef} style={styles}>
      {props.children}
    </div>
  );
}

【讨论】：