在实际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在子组件中设置，则直接调用子组件中的方法进行渲染即可。
效果示意图
