Javascript 拖放React元素修改事件数据传输时出现问题

我正在尝试修改DragStart事件中的内容。当在dom中释放元素时，会插入我想要的内容和另一个无法删除的范围。这似乎只发生在最新版本的Chrome上。Safari和Firefox还有另一个行为

我知道这不是React的正确用法。我试图在这把小提琴中或多或少地再现我需要的东西，你可以看到，拖拽单词“test”并释放它被丢弃了两个跨距，一个是我在事件中放置的跨距，另一个是我无法阻止的跨距

class Test extends React.Component {
    onDragEvent(e) {
      var elem = $(e.target);
      if ( elem.hasClass('drag')  ) {
        e.dataTransfer.setData('text/html', '<span contentEditable="false" class="drag">test dropped</span>');
        return false;
      } 
    }

    onDragOver(e) {
        e.preventDefault();
    }

    render() {
      return <div className="container" contentEditable="true" onDragStart={this.onDragEvent.bind(this)} >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
          <span draggable="true" contentEditable="false" className="drag">test</span>
        </div>;
    }
}

ReactDOM.render(
  <Test/>,
  document.getElementById('container')
);

类测试扩展了React.Component{
翁德拉事件（e）{
var elem=$（e.target）；
if（elem.hasClass（'drag'））{
e、 setData（'text/html'，'testdropped'）；
返回false；
} 
}
昂德拉戈弗（e）{
e、 预防默认值（）；
}
render（）{
返回
知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。
测试
;
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);