Question

我创建了反应组件：

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

第二个：

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;

假设在两个元素之间拖动，如第一个：

它不起作用。当我直接在大括号-DragOver = {this.allowDrop}中粘贴函数代码时，它正在工作。我做错了什么？

Answer 1

不应在render中定义方法;他们需要全部附加到组件本身。即：

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

render(){

拖放reactjs不起作用

1 个答案: