antd中Tree组件的拖拽问题?

发布于 2022-09-12 13:36:36 字数 2126 浏览 21 评论 0

项目中使用到了Antd的Tree组件。节点拖拽效果里面,拖拽目标为<input/>时,也会产生整个结点的拖拽效果,导致文本框内内容无法被鼠标选中。此处如何让子元素的拖拽不触发父元素的拖拽效果呢?


具体现象如下:
image


关键部分相关代码如下:

<Tree
    showIcon
    draggable
    blockNode
    multiple={false}
    onDrop={this.onDrop.bind(this)}
    onSelect={this.handleMenuClick.bind(this)}
>
   {
      data.map((item,index) =>{
         return <TreeNode
            key={index}
            data-item={item}
            data-index={index}
            title={
                <div className="tree-content">
                    {
                        item.editable
                           ?
                        <Input
                            autoFocus
                            onBlur={this.reqChangeName.bind(this, item, index)}
                            onChange={this.changeGroupName.bind(this, item, index)}
                            onClick={(e) => {e.stopPropagation()}}
                            value={item.documentName} 
                        />
                           :
                        <div 
                            className="content-name" 
                            onDoubleClick={this.handleDblClick.bind(this, item, index)}
                        >
                            {item.documentName}
                        </div>
                    }
                </div>
         </TreeNode>
      })
   }
</Tree>

问题更新:
当文本框内内容超出文本框能显示的长度时,即可正常通过鼠标选中文本,有无方法利用此性质解决此处拖拽问题?文本框内容超出效果如下:
image


问题更新:
阻止文本框onMouseMove事件的默认行为,可以实现文本框内鼠标拖选事件不触发父元素的拖拽效果,但是文本框内容依旧无法被拖选中,效果如下:

<Input
    autoFocus
    onMouseMove={(e) => {e.preventDefault()}}
    onBlur={this.reqChangeName.bind(this, item, index)}
    onChange={this.changeGroupName.bind(this, item, index)}
    onClick={(e) => {e.stopPropagation()}}
    value={item.documentName} 
/>

image

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

樱花落人离去 2022-09-19 13:36:36
<Input
  onDragStart={(event) => {
    event.stopPropagation();
    event.preventDefault();
  }}
></Input>

试试这个

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文