Question

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

可以编辑我的文本单元格，它们包含仅包含value属性的State。

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

预期行为/当前行为

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

重现步骤（针对错误）

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

您遇到的问题是由于组件已挂载状态已更改，但状态永远不会再次更改。

此处the fiddle

public class CuteInterfaceImplementation_HELPER
{
    public static IMyCuteInterface<T> From<T>(T t)
    {
        if (t is IEnumerable)
        {
            dynamic dyn = t;
            return FromEnumerable(dyn);
        }
        else
        {
            return new CuteInterfaceImplementation<T>(t);
        }
    }

    public static IMyCuteInterface<T> FromEnumerable<T>(T t) where T: IEnumerable
    {
        return new CuteInterfaceImplementation_WITHEnumerable<T>(t);
    }
}

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

我强烈建议您查看React Component Cycle Life

Fixed-data-table-2 - 反应不更新表格单元格

1 个答案: