Мои функции в конструкторе недоступны

Question

Я новичок в реакциях и jsx. Мне нужно использовать функции onDragOver и onDragStart для html5 в моем проекте реагирования. Таким образом, я определил следующие функции в конструкторе mycode:

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

Но когда я запускаю его я получаю следующее сообщение об ошибке:

Uncaught TypeError: this.allowDrop is not a function 

может кто-нибудь помочь?

Answer 1

Это потому, что allowDrop не виден вне конструктора, поскольку это выражение функции.

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

Объявляет AllowDrop, как упомянуто выше, и это должно решить эту проблему. Подробнее о объявлении функции vs function expression: https://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/