在PreactJS上使用react-sortable-hoc和react-select，但不可拖动

编程问答 2022-06-10

问题描述

【已更新】Sven on github 在preact/issues #2790中解决了这个问题。请查看他的魔术解决方案。 sven提供的两种解决方案代码 https://codesandbox.io/s/preactsortablemultiselect-forked-zw50w?file=/src/MultiSelectSort.js

https://codesandbox.io/s/preactsortablemultiselect-forked-j6mwy?file=/src/MultiSelectSort.js

----------------------------原始问题--------------- >

我尝试可排序的react-select（同时使用JedWatson / react-select和clauderic / react-sortable-hoc，请参阅https://react-select.com/advanced），所有工作都在React上进行。但是对于Preact，Select有效但不能排序（项目不可拖动）。没有错误或警告消息，我也不知道如何使这些多选项目可排序，就像在React上一样。请发表任何意见，谢谢。

我的仓库中可复制的代码：https://github.com/cywhale/preact_select_ex 您可以git clone，npm install，然后通过npm run dev在本地主机上运行。 （该回购基于preact-cli默认模板和https://react-select.com/advanced）

MultiSelectSort函数代码如下：

import { useState } from 'preact/hooks';
import Select,{ components } from 'react-select';
import { SortableContainer,SortableElement } from 'react-sortable-hoc';

function arrayMove(array,from,to) {
  array = array.slice();
  array.splice(to < 0 ? array.length + to : to,array.splice(from,1)[0]);
  return array;
}

const SortableMultiValue = SortableElement(props => {
  const onMouseDown = e => {
    e.preventDefault();
    e.stopPropagation();
  };
  const innerProps = { onMouseDown };
  return <components.MultiValue {...props} innerProps={innerProps} />;
});
const SortableSelect = SortableContainer(Select);

const MultiSelectSort = () => {
const colourOptions = [
  { value: 'chocolate',label: 'Chocolate' },{ value: 'strawBerry',label: 'StrawBerry' },{ value: 'vanilla',label: 'Vanilla' },{ value: 'red',label: 'red' },{ value: 'cyan',label: 'cyan' },{ value: 'blue',label: 'blue' }
]
  const [selected,setSelected] = useState([
    colourOptions[4],colourOptions[5],]);

  const onChange = selectedOptions => setSelected(selectedOptions);

  const onSortEnd = ({ oldindex,newIndex }) => {
    const newValue = arrayMove(selected,oldindex,newIndex);
    setSelected(newValue);
  };

  return (
    <SortableSelect
      // react-sortable-hoc props:
      axis="xy"
      onSortEnd={onSortEnd}
      distance={4}
      getHelperDimensions={({ node }) => node.getBoundingClientRect()}
      isMulti
      options={colourOptions}
      value={selected}
      onChange={onChange}
      components={{
        MultiValue: SortableMultiValue,}}
      closeMenuOnSelect={false}
    />
  );
};
export default MultiSelectSort;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

preactreact-selectreact-sortable-hoc