antd中Tree组件的拖拽问题?

项目中使用到了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>
阅读 979
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题