meine Funktionen im Konstruktor sind nicht erreichbar

Question

Ich bin neu zu reactjs und jsx. Ich muss OnDragOver und OnDragStart Funktionalität von HTML5 in meinem Reaktionsprojekt verwenden. So I definiert sind Funktionen wie im Konstruktor mycode folgt:

export class Navbar extends React.Component { 

constructor(props) { 
    super(); 
    var allowDrop = function allowDrop(ev) { 
     ev.preventDefault(); 
    } 

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

    function drop(ev) { 
     ev.preventDefault(); 
     var src = document.getElementById(ev.dataTransfer.getData("source")); 
     var srcParent = src.parentNode; 
     var tgt = ev.currentTarget.firstElementChild; 

     ev.currentTarget.replaceChild(src, tgt); 
     srcParent.appendChild(tgt); 
    } 

} 

componentDidMount() { 
    } 

render() { 
    return (
     <ul className="navigation"> 
      <li id="t1" className="nav-item" onDrop={this.drop(event)} onDragOver={this.allowDrop(event)}><a href="#" 
                             draggable="true" 
                             onDragStart={thisdrag(event)}>Greater 
       Saint John</a></li> 


      <li className="nav-item" id="t2" ondrop={this.drop(event)} onDragOver={this.allowDrop(event)}><a href="#" 
                             draggable="true" 
                             onDragStart={this.drag(event)}><span 
       className="glyphicon glyphicon-star"></span>&nbsp;&nbsp; The Victoria Star</a></li> 

     </ul> 
    ); 
    } 
    } 

Aber wenn ich laufe es ich folgende Fehlermeldung erhalten:

Uncaught TypeError: this.allowDrop is not a function 

kann jemand helfen?

Answer 1

Dies liegt daran, dass allowDrop außerhalb des Konstruktors nicht sichtbar ist, da es sich um einen Funktionsausdruck handelt.

function allowDrop(ev) { ev.preventDefault(); }

AllowDrop erklären, wie oben erwähnt, und dies sollte das Problem lösen. Weitere Informationen zu Funktionsdeklaration vs Funktion Ausdruck: https://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/