react, onDrop事件失效

Question

想实现拖放功能在代码中, 当组件drop的时候, 没有触发onDrop事件(更准确的说楼主绑定在onDrop事件上的函数没有被调用, 这是代码:

 <Paper 
                    style={styles.paper} 
                    zDepth={1} rounded={false}>
                    <p style={styles.tip}>{this.state.tip}</p>
                    <Add
                        onDragEnter={this.dragenter}
                        onDragLeave={this.dragleave}
                        onDrop={this.drop}
                        style={styles.add} 
                        color={this.state.dragFlag} />
                    <FlatButton 
                        onTouchTap={this.openFileDialog} 
                        style={styles.openFile} 
                        label="Open file" 
                    />
                    <FloatingActionButton 
                        onTouchTap={this.saveImportConfigs}
                        disabled={disabled} 
                        style={styles.floatingButton}>
                    <Done />        
                    </FloatingActionButton>

顺带说下～ 楼主用的是material-ui框架, 在<Add /> 组件里实现拖放功能, onDragEnter, onDragLeave都有效, 就是onDrop失效, 函数名什么的都是核对过的。
这是什么原因呢?

Answer 1

之前的回答有些问题，我自己使用onDrap测试了一下，可能你的<Add>组件里需要添加onDragOver事件，代码如下

    onDragOver(event){
        event.preventDefault();
        console.log("onDropOver")
    },

添加后的结果如下：

看你的代码可能是想实现从外部拖文件到浏览器，不过我觉得可能是相同的原因造成onDrop无效。

测试代码如下：

import React, {component} from 'react';
// import Paper from 'material-ui/Paper/Paper';

var Test = React.createClass({

    dragStart(event) {

    },

    onDrop(event){
        // event.preventDefault();
        console.log("onDrop")
    },

    onDragOver(event){
        event.preventDefault();
        console.log("onDropOver")
    },

    onDragEnter(){
        console.log('enter')
    },

    onDragLeave(){
        console.log('leave')
    },


    render(){
        var styles = {

            draggable: {
                width: 200,
                height: 20,
                textAlign: "center",
                background: "white"
            },
            dropzone: {
                width: 200,
                height: 20,
                background: "blueviolet",
                marginBottom: 10,
                padding: 10
            }
        };

        return (
            <div className="add">
                <div style={styles.dropzone}>
                    <div draggable="true" style={styles.draggable}>
                        This div is draggable
                    </div>
                </div>
                <div style={styles.dropzone} onDrop={this.onDrop} onDragEnter={this.onDragEnter}
                     onDragLeave={this.onDragLeave} onDragOver={this.onDragOver}></div>
            </div>
        )
    }
});


module.exports = Test;