Question

我已经添加到React应用导航栏中，用户可以拖动它并替换位置。（很好！）

现在，我正尝试递归地渲染导航树，以便可以拖动和替换内部导航（不重设父级）。

递归渲染可以正常工作，但是问题是拖动内部子级会导致拖动整个父节点。

NodeWrapper.js：

export class NodeWrapper extends Component {
  public render() {
    return (
      <DragList onItemMoved={this.props.onItemMoved}>
        {this.props.navItems
          .map((component, index) => (
            <Node key={`node-${index}`} {...component}/>
          ))}
      </DragList>
    );
  }
}

Node.js：

public render() {
 return (
  <div>
    <span>{this.props.label}</span>
    {this.props.childNodes && (
      <NodeWrapper navItems={this.props.childNodes} />
    )}
  </div>
 );
}

*请注意，DragList组件确实非常庞大，我认为它与问题无关，如果被问到，它将添加。基本上，它呈现了具有事件处理程序拖动功能的子级列表。

我尝试为拖动事件处理程序添加event.stopPropagation()，但它仍会捕获并拖动整个父节点。

如何在所有级别之间执行拖动？

拖动子项时如何避免拖动父项？

0 个答案: