如何在 reactJs 中放置元素？

问题描述

我开发了使用 reactJs 拖放元素的代码，元素可以被拖拽但不能放在可放置的位置。当我拖动元素并进入可放置区域时，它成功传递了在控制台中显示的数据。但唯一的问题是元素不能放置在可放置区域。所以任何人都可以请指导我找到我在这里做错了什么？

export class Beautiful extends Component {
    constructor(props) {
        super(props)

        this.state = {
            items: [
                {
                    name: "milk",expiryDate: "16-01-2020"
                }
            ],}
    }

    onDrop = (ev,cat) => {
        ev.preventDefault()
        let id = ev.dataTransfer.getData("id");
        console.log(id);
    }
    onDragStart = (ev,id) => {

        console.log('dragstart:',id);
        ev.dataTransfer.setData("id",id);
        // let ExpiryDate=ev.dataTransfer.setData("expiryDatae",expirydate)
    }
    onDragOver = (ev) => {
        ev.preventDefault();
    }
    render() {

        return (
            <div>
                {this.state.items.map((data,index) => {
                    return (
                        <div>
                            <ul className="list-unstyled">
                                <li draggable key={data.name}
                                    onDragStart={(e) => this.onDragStart(e,data.name)}> {data.name}
                                </li>
                                <li draggable key={data.name}
                                    onDragStart={(e) => this.onDragStart(e,data.expiryDate)} >{data.expiryDate}</li>
                            </ul>
                        </div>)
                })}
                <div id="div1" onDrop={(e) => this.onDrop(e,"todo")} onDragOver={(e) => this.onDrop(e)}>

                </div>
            </div>
        )
    }
}

export default Beautiful```

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）