Javascript Fixed-data-table-2-React不更新表格单元格

我已经完成了使用自定义单元格类型的固定数据表的实现

我的文本单元格可以编辑，它们包含的状态仅包含值属性

然后我创建了onBlur事件，该事件在输入失去焦点并更新表状态上的数据后触发。 这一切都很好

预期行为/当前行为

但是，当我的数据从分页或排序事件更改时，我的单元格不会用新值更新状态，因为我正在构造函数上设置状态，它只运行一次

复制步骤（针对bug）

var Table=FixedDataTable.Table；
var Column=FixedDataTable.Column；
var Cell=FixedDataTable.Cell；
//自定义标题单元格
var MyHeaderCell=React.createClass({
mixin:[React.addons.PureRenderMixin]，
render:function（）{
返回列：{this.props.columnKey}；
}
})
//自定义单元格
var MyCell=React.createClass({
mixin:[React.addons.PureRenderMixin]，
getInitialState:函数（）{
返回{
值：this.props.data[this.props.rowIndex][this.props.columnKey]
};
},
render:function（）{
返回单元格：{this.state.value}；
}
})
var MyTable=React.createClass({
mixin:[React.addons.PureRenderMixin]，
render:function（）{
var width=this.props.width；
var height=this.props.height；
var数据=this.props.data；
返回(
{this.createColumns（）}
);
},
createColumns:function（）{
var width=this.props.width；
var数据=this.props.data；
var columnCount=数据[0]。长度；
var列=[]；
for（设i=0；i

单击ChangeData，不会发生任何事情，但如果更改以下代码：

{this.state.value}

到

this.props.data[this.props.rowIndex][this.props.columnKey]

它起作用了

---

如何重新构建单元，使状态通过构造函数获得新值？

您面临的问题是，组件已安装，状态已更改，但状态再也不会更改。添加

componentWillReceiveProps

以更新传递新道具时的状态将解决您的问题

这里

var Table=FixedDataTable.Table；
var Column=FixedDataTable.Column；
var Cell=FixedDataTable.Cell；
//自定义标题单元格
var MyHeaderCell=React.createClass({
mixin:[React.addons.PureRenderMixin]，
render:function（）{
返回列：{this.props.columnKey}；
}
})
//自定义单元格
var MyCell=React.createClass({
mixin:[React.addons.PureRenderMixin]，
getInitialState:函数（）{
返回{
值：this.props.data[this.props.rowIndex][this.props.columnKey]
};
},
组件将接收道具（下一步）{
this.setState（{value:nextrops.data[nextrops.rowIndex][nextrops.columnKey]}）；
},
render:function（）{
返回单元格：{this.state.value}；
}
})
var MyTable=React.createClass({
mixin:[React.addons.PureRenderMixin]，
render:function（）{
返回(
{this.createColumns（）}
);
},
createColumns:function（）{
var列=[]；
for（设i=0；i

我移动了一些代码，只是为了使它与React保持一致

---

我强烈建议你看一看

这是工人，谢谢！我还在学习react api。

var Table = FixedDataTable.Table;
var Column = FixedDataTable.Column;
var Cell = FixedDataTable.Cell;

//Custom header cell
var MyHeaderCell = React.createClass({
  mixins: [React.addons.PureRenderMixin],

  render: function() {
   return <Cell {...this.props}>Column: {this.props.columnKey}</Cell>;
  }
})

//Custom cell
var MyCell = React.createClass({
  mixins: [React.addons.PureRenderMixin],

  getInitialState: function() {
    return {
      value: this.props.data[this.props.rowIndex][this.props.columnKey]
    };
  },

  render: function() {
    return <Cell {...this.props}>Cell: {this.state.value}</Cell>;
  }
})

var MyTable = React.createClass({
  mixins: [React.addons.PureRenderMixin],

  render: function() {
    var width = this.props.width;
    var height = this.props.height;
    var data = this.props.data;

    return (
      <Table
        rowHeight={50}
        rowsCount={data.length}
        width={width}
        height={height}
        headerHeight={50}
      >
        {this.createColumns()}
      </Table>
    );
  },

  createColumns: function() {
    var width = this.props.width;
    var data = this.props.data;
    var columnCount = data[0].length;
    var columns = [];
    for (let i = 0; i < columnCount; i++) {
     columns.push(
       <Column
          key={i}
          columnKey={i}
          header={<MyHeaderCell />}
          cell={<MyCell data={data} />}
          width={width / columnCount}
        />
      )
    }

    return columns;
  }
})

var container = document.getElementById('container');

// Table data as a list of array.
var myData = [
  ['a1', 'b1', 'c1'],
  ['a2', 'b2', 'c2'],
  ['a3', 'b3', 'c3'],
  // .... and more
];

function changeData() {
var temp = myData.slice();
debugger;
var iR = 0;
    var newData = [
  ['x1', 'k1', 'w1'],
  ['x2', 'k2', 'w2'],
  ['x3', 'k3', 'w3'],
  // .... and more
];
  myData = newData;
  render();
}

// Render your table
function render() {
  var height = container.offsetHeight;
  var width = container.offsetWidth;
  ReactDOM.render(<div><button onClick={changeData}>Change Data</button><MyTable height={height} width={width} data={myData} /></div>,
    document.getElementById('container'));
}

window.onresize = render;
render();

var Table = FixedDataTable.Table;
var Column = FixedDataTable.Column;
var Cell = FixedDataTable.Cell;

//Custom header cell
var MyHeaderCell = React.createClass({
  mixins: [React.addons.PureRenderMixin],

  render: function() {
   return <Cell {...this.props}>Column: {this.props.columnKey}</Cell>;
  }
})

//Custom cell
var MyCell = React.createClass({
  mixins: [React.addons.PureRenderMixin],
  getInitialState: function() {
    return {
      value: this.props.data[this.props.rowIndex][this.props.columnKey]
    };
  },

  componentWillReceiveProps(nextProps){
    this.setState({ value: nextProps.data[nextProps.rowIndex][nextProps.columnKey]});
  },

  render: function() {
    return <Cell {...this.props}>Cell: {this.state.value}</Cell>;
  }
})

var MyTable = React.createClass({
  mixins: [React.addons.PureRenderMixin],

  render: function() {
    return (
      <Table
        rowHeight={50}
        rowsCount={this.props.data.length}
        width={this.props.width}
        height={this.props.height}
        headerHeight={50}
      >
        {this.createColumns()}
      </Table>
    );
  },

  createColumns: function() {
    var columns = [];
    for (let i = 0; i < this.props.data[0].length; i++) {
     columns.push(
       <Column
          key={i}
          columnKey={i}
          rowIndex={this.props.data[0]}
          header={<MyHeaderCell />}
          cell={<MyCell data={this.props.data} />}
          width={this.props.width / this.props.data[0].length}
        />
      )
    }

    return columns;
  }
})

var Container = React.createClass({

  getInitialState: function() {
    return {
      iR: [
        ['a1', 'b1', 'c1'],
        ['a2', 'b2', 'c2'],
        ['a3', 'b3', 'c3'],
      ]
    };
  },
  changeData: function() {
    var newiR = [
      ['x1', 'k1', 'w1'],
      ['x2', 'k2', 'w2'],
      ['x3', 'k3', 'w3'],
    ];
    this.setState({ iR: newiR });
  },

  render: function() {
    return (
      <div>
        <button onClick={this.changeData}>Change Data</button>
        <MyTable height={this.props.height} width={this.props.width} data={this.state.iR} />
      </div>
    );
  }
})

var container = document.getElementById('container');

// Render your table
function render() {
  var height = container.offsetHeight;
  var width = container.offsetWidth;
  ReactDOM.render(<Container height={height} width={width}/>,
    document.getElementById('container'));
}

window.onresize = render;
render();