拖放在不工作

Question

我創建reactjs反應組分：

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}中時，它正在工作。我做錯了什麼？

Answer 1

你不應該在渲染中定義你的方法;他們需要全部附加到組件本身。 I.e：

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

render(){