React 拖动设置单元格的大小

在实际table表格的场景中，有很多时候都需要用到拖动调整table单元格的大小。而在React各种的文章中，我只能找到很少的相关资料，大部分也是贴近另一种项目需求——拖动窗口。当我把这个功能实现的时候，我觉得我有必要把它写下来，以备不时之需。

// 改变单元格尺寸，
//参数：x-table数组的一维索引，y-table数组的二维索引，width-原单元格宽度，height-原单元格高度，ev-对应得对象
cellDown(x, y, width, height, ev) {
  //获取table数组，以及单元格鼠标点击事件的起始位置
  var table = this.props.table,disX = ev.pageX,disY = ev.pageY;
  //引入self变量主要是为了获取react中的this，使得在document中能够使用
  var self = this;
  document.onmousemove = function(e) {//鼠标移动时
    e.preventDefault();
    let X = e.pageX - disX, Y = e.pageY - disY;//计算前后坐标的差值
    table[x][y].width = width + X;//为宽度加上差值
    table[x][y].height = height + Y;//为高度加上差值
    self.props.setTable(table);//通过调用父组件的setTable方法重新渲染table
  }
  document.onmouseup = function(e) {//鼠标抬起时
    document.onmousemove = null;
    document.onmouseup = null;
  }
}

在本例中展示的是一个子组件的方法，因此重新渲染table的方法被我写在父组件中，若table在子组件中设置，则直接调用子组件中的方法进行渲染即可。

效果示意图