Drag modify elements react size

Drag modify elements to achieve size

onMouseDown get first information
document.body.onmousemove drag acquiring a difference value, adding value with the last, to get the current value.
document.body.onmouseup end drag

<i data-dir="se" onMouseDown={(e: any) => {
                    e.preventDefault()
                    e = e || event
                    let { clientX, clientY } = e
                    let width = parseFloat(editorStyle.width)
                    let height = parseFloat(editorStyle.height)
                    document.body.onmousemove = (e: any) => {
                        e = e || event
                        let newWidth = width + (e.clientX - clientX)
                        let newHeight = height + (e.clientY - clientY)
                        seteditorStyle({
                            ...editorStyle,
                            width: newWidth + 'px',
                            height: newHeight + 'px'
                        })
                        setTreeItemDataValue({
                            ...selectItem,
                            style: {
                                ...selectItem.style,
                                'width': `${newWidth}px`,
                                'height': `${newHeight}px`
                            }
                        })
                    }
                    document.body.onmouseup = function () {
                        document.body.onmousemove = null
                    }
                }} className="editor-grip editor-grip-se"><b></b></i>

--END--

Reproduced in: https: //www.jianshu.com/p/a3e759e31ac6