react拖拽改變某一塊div的寬高

拖動改變某一塊div的寬高

<div className={`${styles.outer}`} style={{height: DetailStore.endHeight}} id="dataSetTable">
     <div
       className={styles.outerLine}
       onMouseDown={e => {
         DetailStore.dragable = true;
         DetailStore.oldY = e.pageY;
         DetailStore.midHeight = document.getElementById('dataSetTable').clientHeight;
         document.onmousemove = event => {
           if (DetailStore.dragable && DetailStore.midHeight !== 0) {
             let y = DetailStore.oldY - event.pageY + DetailStore.midHeight;
             if (y > 50) {
               DetailStore.endHeight = y + 'px';
             } else {
               DetailStore.endHeight = 50 + 'px';
             }
             y = null;
           }
         };
         document.onmouseup = () => {
           if (DetailStore.dragable) {
             DetailStore.midHeight = DetailStore.endHeight;
           }
           DetailStore.oldY = 0;
           DetailStore.dragable = false;
         };
       }}
     ></div>
     <div
       className={`${styles.dataSetTable} ${styles.inner} ${
         DetailStore.tableData.length === 0 ? `${styles.emptyHead}` : ''
       }`}
     >
       <div className={styles.tableHeader}>
         <TableCount />
       </div>
       <TableSection />
       <DataSourceTableModal />
     </div>
 </div>