我是React的初学者。
我的第一个项目是关于在网页中表示矩阵。
此时,我希望我的应用具有“动态”矩阵尺寸:即用户可以更改矩阵的尺寸。
在我想要添加另一个功能之前,它一直工作良好:让用户编辑矩阵的单元格。
我打算为此使用“ ondblclick”,但我首先发现了另一个问题: react-refs-must-have-owner
这是我的代码(Matrix.js):
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
export default class Matrix extends Component {
TableRow = ({data}) => (
<tr>
{data.map(col => {
return (<td class="square" id={"sq"+col.id} ref={"Matrix.cells["+col.id+"]"} onDoubleClick={Matrix.editnum}>{col.num}</td>);
})}
</tr>
)
Table = ({data}) => {
var rets = [];
for(var i = 0; i < data.row.length; i++){
console.log(data.row[i].col);
rets.push(<this.TableRow data={data.row[i].col} />);
}
var cw = data.row[0].col.length * 34;
return <table id="mtable" style={{width: cw+"px"}}>{rets}</table>;
}
mat = {row : [{col: [{num: '0', id: '0'}]}]};
width = 1;
height = 1;
constructor(props) {
super(props);
this.cells = [];
}
editnum(x) {
console.log(x.target.id);
}
updateDimension(w, h) {
w = parseInt(w,10);
h = parseInt(h,10);
if(isNaN(w) || w < 1) {
w = 1;
}
if(w > 40) {
w = 40;
}
if(isNaN(h) || h < 1) {
h = 1;
}
console.log(w,h);
this.cells = new Array(w*h);
this.width = w;
this.height = h;
var baseobj = {num : '0', id : '0'};
var rowarr = [];
var i;
for(i = 0; i < w; i++){
baseobj = {num : '0', id : i};
rowarr.push(baseobj);
}
var tablearr = [];
for(i = 0; i < h; i++){
var rowobj = {col : new Array(w)};
for(var j = 0; j < w; j++){
rowobj.col[j] = {num : '0', id : i*w+j};
this.cells[i*w+j] = React.createRef();
}
console.log(rowobj);
tablearr.push(rowobj);
}
var tableobj = {row : tablearr}
this.mat = tableobj;
}
updateCell(i, j, x) {
this.mat.row[i].col[j].setState({num : x});
}
render() {
return <div id="matdiv"><this.Table data={this.mat} /></div>;
}
}
有什么办法可以通过吗?