拖放在reactjs中不起作用答案

【问题标题】：Drag and drop in reactjs not working拖放在reactjs中不起作用
【发布时间】：2026-02-22 21:15:02
【问题描述】：

我创建了反应组件：

class SecondSqIn extends React.Component{

render(){

allowDrop:(ev)=>{
ev.preventDefault();
}

drop: (ev)=>{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}

    return(
        <div
        id='sq3'
        onDrop={this.drop}
        onDragOver={this.allowDrop}
        >
        {console.log('return')}
        </div>  
    )
}
}

第二个：

class Apple extends React.Component{
render(){

drag: (ev)=>{
ev.dataTransfer.setData("text", ev.target.id);
}
    return(
        <div
        id='apple'
        draggable="true"
        onDragStart = {this.drag}>
        </div>
    )
}
}
onDragStart: PropTypes.func.isRequired
export default Apple;

假设在两个元素之间拖动，如第一个元素：

它不工作。当我将函数代码直接粘贴在大括号中时它正在工作 - onDragOver = {this.allowDrop}。我做错了什么？

【问题讨论】：

标签： reactjs drag-and-drop

【解决方案1】：

你的方法不应该在 render 中定义；它们都需要附加到组件本身。即：

drag(ev){
    ev.dataTransfer.setData("text", ev.target.id);
}

render(){

【讨论】：