Question

我想使用react和typescript实现DragAndDrop组件，而我是使用React Redux的新手。

下面是DragAndDrop组件的外观，

class DragAndDrop extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dragging: false,
        }; 
    }

    componentDidMount() {
        this.drag_counter = 0;
        this.enable_drag_event_listeners();
    }

    componentWillUnmount() {
        this.disable_drag_event_listeners();
    }

    enable_drag_event_listeners = () => {
        document.addEventListener('dragenter', this.handle_drag_in);
        document.addEventListener('dragleave', this.handle_drag_out);
        document.addEventListener('dragover', this.handle_drag);
        document.addEventListener('drop', this.handle_drop);
    }

    disable_drag_event_listeners = () => {
        document.removeEventListener('dragenter', this.handle_drag_in);
        document.removeEventListener('dragleave', this.handle_drag_out);
        document.removeEventListener('dragover', this.handle_drag);
        document.removeEventListener('drop', this.handle_drop);
    }

    handle_drag = (e) => {
        if (!this.props.loading) {
            e.preventDefault();
            e.stopPropagation();
        }
    }

    handle_drag_in = (e) => {
        if (!this.props.loading) {
            e.preventDefault();
            e.stopPropagation();
            this.drag_counter++;
            if (e.dataTransfer.files) {
                this.setState({dragging: true});
            }
        }
    }

    handle_drag_out = (e) => {
        if (!this.props.loading) {
            e.preventDefault();
            e.stopPropagation();
            this.drag_counter--;
            if (this.drag_counter === 0) {
                this.setState({dragging: false});
            }
        }
    }

    handle_drop = (e) => {
        if (!this.props.loading) {
            e.preventDefault();
            e.stopPropagation();
            this.setState({dragging: false});
            if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
                this.props.handle_drop(e);
                e.dataTransfer.clearData();
                this.drag_counter = 0;
            }
        }
    }

    render() {
        return (
            <div>
                {this.state.dragging &&
                    <div>
                        <div className="drop_zone">
                            <div className="drop_zone_overlay"/>
                            <div className="drop_zone_text">
                            <div>Drop your files here</div>
                        </div>
                    </div>
                }
                {this.props.children}
            </div>
        )
    }
}

从上面的代码中可以看到，我已经使用了this.state和this.setState，componentdidmount，componentdidupdate和componentwillunmount。

我想使用react redux usestate，setstate和其他东西。

如何更改上面的代码以使用usestate和setstate以及如何实现componentdidmount，componentdidupdate，componentwillunmount挂钩。

我尝试了什么？

function DragAndDrop() {
    const [isdragging, setIsDragging] = React.useState(false);
    handle_drag = (e) => {
        if (!this.props.loading) {
            e.preventDefault();
            e.stopPropagation();
        }
    }

    handle_drag_in = (e) => {
        if (!this.props.loading) {
            e.preventDefault();
            e.stopPropagation();
            this.drag_counter++; //how do i set this with react redux and also this is not a class

            if (e.dataTransfer.files) {
                setIsDragging(true);
            } 
        }
    }

    handle_drag_out = (e) => {
        if (!this.props.loading) {
            e.preventDefault();
            e.stopPropagation();
            this.drag_counter--; // how to keep track of this counter
            if (this.drag_counter === 0) {
                setIsDragging(false);
            }  
        }
    }

    handle_drop = (e) => {
        if (!this.props.loading) {
            e.preventDefault();
            e.stopPropagation();
            setIsDragging(false);
            if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
                this.props.handle_drop(e);
                e.dataTransfer.clearData();
                this.drag_counter = 0; //how to keep track of this
            }
        }
    }

    render() {
        return (
            <div>
                {isdragging &&
                    <div>
                        <div className="drop_zone">
                            <div className="drop_zone_overlay"/>
                            <div className="drop_zone_text">
                                <div>Drop files here</div>
                            </div>
                        </div>
                    </div>
                }
                {this.props.children}
            </div>
        )
    }
}

有人可以帮我这个忙吗？谢谢。如何在React Redux中考虑componentdidmount，componentdidupdate，componentwillunmount。

谢谢。

Answer 1

title,place,geoname
Battle of Lade,Miletus,https://www.geonames.org/4814762
Battle of Mursa Major,Pannonia (Roman province),https://www.geonames.org/8181615
Battle of Mursa Major,Osijek,https://www.geonames.org/3193935

如何使用react和typescript使用usestate和setstate代替this.setState？

1 个答案: