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

Question

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

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

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

预期行为/当前行为

但是，当我的数据因分页或排序事件发生变化时，我的 Cell 不会使用新值更新状态，因为我在 Constructor 上设置状态并且它只运行一次。

重现步骤(针对错误)

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();

JSFiddle

点击 ChangeData 没有任何反应，但是如果你改变下面的代码:

{this.state.value}

到

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

有效。

我如何重新构建 Cell，以便 State 通过构造函数获得新值？

Answer 1

您面临的问题是由于组件已安装且状态已更改，但随后状态再也不会更改。添加 componentWillReceiveProps 以在传递新 Prop 时更新状态将解决您的问题。

在这里the fiddle

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();

我移动了一些代码以使其与 React 保持一致。

我强烈推荐你看看React Component Cycle Life