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/

我在构造函数中的函数是不可访问的

1 个答案: