ListSort拖拽的怎么跟antd menu一起使用 急等！！！！

[Slngle]

如题

                               <ListSort
                    component={Menu}
                    componentProps={{
                        style:{ width: 240 },
                        mode:"inline",
                        selectedKeys:[chooseMenu],
                        openKeys:openKeys,
                        onOpenChange:(e) => {
                            this.changeOpen(e);
                        },
                        onClick:(e) => {
                            this.changeSelectedKey(e)
                        }
                    }}
                >
                    {menuCnt}
                </ListSort>

这样写毛用没有啊！！！

[Slngle]

@jljsj33 求教啊

[jljsj33]

有报错没？？？menu 子级用的是什么，，submenu 吗??

[Slngle]

  getChildren = (item, i) => {
    const onMouseDown = this.onMouseDown.bind(this, i);
    const style = { ...this.state.childStyle[i] };
    return React.createElement(TweenOne,
      {
        ...item.props,
        onMouseDown,
        onTouchStart: onMouseDown,
        style: { ...item.props, ...style },
        key: item.key,
        animation: this.state.animation[i],
        component: item.type,
      }
    );
  };

应该是TweenOne 的缘故 导致子集不能获取到props 但是我不知道怎么改 @jljsj33

[Slngle]

return this.props.selectedKeys.indexOf(this.props.eventKey) !== -1; antd menu item 这句报错 获取不到 this.props.selectedKeys

[Slngle]

就是menu的子集收不到props了 － －我也不知道为什么

[Slngle]

@jljsj33 在看么 很纠结啊😭

[jljsj33]

。。。。我看下吧。。

[Slngle]

                                      <ListSort
                        component={Menu}

                        dragClassName="list-drag-selected"
                        appearAnim={{ animConfig: { marginTop: [5, 30], opacity: [1, 0] } }}
                    >
                        <Menu.Item key="4">Option 4</Menu.Item>
                        <Menu.Item key="5">Option 5</Menu.Item>
                        <Menu.Item key="6">Option 6</Menu.Item>
                        <Menu.Item key="7">Option 7</Menu.Item>
                    </ListSort>

@jljsj33 万分感谢🙏 推测是跟https://github.com/ant-design/ant-motion/issues/108
这个问题的原因一致的 代码在ant-motion/src/edit/template/components/ListSort.jsx 我引用的是这个

[jljsj33]

事件冲突。。。不能搞，，你可以加个托动的图标来托动

[Slngle]

哪个事件冲突啊 可是我这边的报错像是子item拿不到父menu的props导致的啊 @jljsj33

[jljsj33]

把 appearAnim 去掉

[jljsj33]

我找一下以前的 demo ，，好像有处理多事件的方法的

[Slngle]

@jljsj33 appearAnim去掉后是出来了 但是不能拖。。。

[Slngle]

@jljsj33 哎 这个需求麻烦死了 而且催的紧 麻烦你了

[jljsj33]

不嫌代码丑，可以这么搞。。

<ListSort
  component={Menu}
  dragClassName="list-drag-selected"
  ref={(c) => { this.list = c; }}
>
  {['0', '1', '2'].map((key, i) => { 
    return <Menu.Item key={key}>Option {key} <Icon type="cross-circle-o" onMouseDown={(e) => {
      const keys = this.list.state.children.map(item => Number(item.key));
      console.log(keys)
      this.list.onMouseDown(keys.indexOf(i), e)
    }} /></Menu.Item>
  })}
</ListSort>

ListSort.jsx 里把 onMouseDown 去掉

样式里改下 ant-menu-item transition 样式，去掉 all，，手动添加需要的动画过渡.

[Slngle]

@jljsj33 🙏感谢 实现就好 还有一个问题 ListSort嵌套没问题的吧 因为同级之间拖拽才能换位置

[jljsj33]

这不知道，，你试试，，应该没问题。。。

[Slngle]

@jljsj33 貌似不行。。。。。

                              const content = (<div>

                    <Icon type="cross-circle-o" onMouseDown={(e)=>{
                        const keys = this.list.state.children.map(item => Number(item.key));
                        console.log(keys)
                        this.list.onMouseDown(keys.indexOf(data.menuId), e)
                    }}/>
                    <span>{data.menuName}</span>
                </div>);

                return (
                    <SubMenu key={data.menuId} title={content}>

                        {/*{item}*/}
                    </SubMenu>
                )

submenu不知道怎么才能包裹进去 直接包裹会报错 而且包裹之后props传递不下去不知道怎么弄的

[jljsj33]

直接放subMenu。。不要在外面套Div icon放subMenu的title 里

[jljsj33]

看错了。。我明天再看下。。

[jljsj33]

整不了，，， subMenu 不支持外部传 style 属性。。。

[jljsj33]

等 ant-d 下个版本补个 style 才能整 😓