想实现拖放功能在代码中, 当组件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失效, 函数名什么的都是核对过的。
这是什么原因呢?
之前的回答有些问题,我自己使用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;