ReactJS动态引用必须具有所有者

时间:2018-07-03 15:56:39

标签: javascript arrays reactjs

我是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>;
  }
}

有什么办法可以通过吗?

0 个答案:

没有答案