Glisser et déposer reactjs ne fonctionne pas

Question

J'ai créé composants réagissent:

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> 
    ) 
} 
} 

Et seconde:

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; 

qui est supposé être traîné entre deux éléments comme la première:

Cela ne fonctionne pas. Cela fonctionne quand je colle le code de fonction directement dans les accolades - onDragOver = {this.allowDrop}. Qu'est-ce que je fais mal?

Answer 1

Vous ne devriez pas définir de méthodes dans render; ils doivent tous être attachés au composant lui-même. I.e:

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

render(){