我在构造函数中的函数无法访问

Question

我是 reactjs 和 jsx 的新手。我需要在我的 React 项目中使用 html5 的 onDragOver 和 onDragStart 功能。所以我在 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，这应该可以解决问题。有关函数声明与函数表达式的更多详细信息： https://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/

我在构造函数中的函数无法访问

my functions in constructor are not reachable

reactjs

react-jsx

jsx