table的key的问题

[shepherdwind]

https://github.com/react-component/table/blob/master/src/Table.jsx#L55

这里key等于数组的index，如果原来数组中某个元素删除了的时候，就会出现bug。

比如

'use strict';

var React = require('react');
var Table = require('rc-table');

var CheckBox = React.createClass({

  render: function() {
    return (
      <label>
        <input type="checkbox" />
        {this.props.id}
      </label>
    );
  }
});

var MyTable = React.createClass({

  getInitialState: function() {
    return {
      data: this.props.data
    };
  },

  handleClick: function(index) {
    var self = this;
    return function() {
      self.remove(index);
    };
  },

  remove: function(index) {
    var rows = this.state.data;
    rows.splice(index, 1);
    this.setState({
      data: rows
    });
  },

  renderAction: function(o, row, index) {
    return <a href="#" onClick={this.handleClick(index)}>删除</a>;
  },

  render: function() {
    var state = this.state;
    var columns = [
      { title: '表头1', dataIndex: 'a', width: 100, renderer: this.checkbox },
      { title: '表头2', dataIndex: 'b', width: 100},
      { title: '表头3', dataIndex: 'c', width: 200},
      { title: '操作', dataIndex: '', renderer: this.renderAction }
    ];
    return (
      <Table columns={columns} data={state.data} className="table"/>
    );
  },

  checkbox: function(a) {
    return <CheckBox id={a} />;
  }
});

var data = [{a: '123'}, {a: 'cdd', b: 'edd'}, {a: '1333', c: 'eee', d: 2}];

React.render(
  <div>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <MyTable data={data} className="table"/>
  </div>,
  document.getElementById('__react-content')
);

这个代码，丢example里，表头1这一列选中checkbox，这时候，把当前这一列删除。

下面一条占据了被删除那一列的位置，这时候key没有改变，CheckBox组件是不会更新。所以下面一列checkbox还是选中状态。

[shepherdwind]

修改方案，应该可以配置使用某个字段内容作为key，而不是用数组的id