var EventItems = React.createClass({
  getInitialState: function() {
    return {items: this.props.items};
  },

  handleAdd: function( e ) {
    e.preventDefault();
    this.state.items.push({id: new Date().getTime()})
    this.setState({items: this.state.items});
  },

  handleDelete: function( index ) {
    this.state.items.splice(index, 1);
    this.replaceState({items: this.state.items});
  },

  validation: function() {
  },

  render: function() {
    var item = this.state.items.map(function(item, index) {
      console.log(index, item)
      return <EventItem key={item.id} index={index} onDelete={this.handleDelete} item={item} />
    }.bind(this));

    return (
      <div className="panel colourable">
        <div className="panel-heading">
          <span className="panel-title">{ I18n.t('simple_form.labels.event.item') }</span>
          <div className="panel-heading-controls">
            <button className="btn btn-xs btn-success" onClick={this.handleAdd}>{ I18n.t('helpers.add') }</button>
          </div>
        </div>
        {this.validation()}
        <div className="panel-body">
          {item}
        </div>
      </div>
    );
  }
});

var EventItems = React.createClass({
  getInitialState: function() {
    return {items: this.props.items};
  },

  handleAdd: function( e ) {
    e.preventDefault();
    this.state.items.push({key: new Date().getTime()})
    this.setState({items: this.state.items});
  },

  handleDelete: function( index ) {
    this.state.items.splice(index, 1);
    this.replaceState({items: this.state.items});
  },

  validation: function() {
  },

  render: function() {
    var item = this.state.items.map(function(item, index) {
      console.log(index, item)
      return <EventItem key={item.key} index={index} onDelete={this.handleDelete} item={item} />
    }.bind(this));

    return (
      <div className="panel colourable">
        <div className="panel-heading">
          <span className="panel-title">{ I18n.t('simple_form.labels.event.item') }</span>
          <div className="panel-heading-controls">
            <button className="btn btn-xs btn-success" onClick={this.handleAdd}>{ I18n.t('helpers.add') }</button>
          </div>
        </div>
        {this.validation()}
        <div className="panel-body">
          {item}
        </div>
      </div>
    );
  }
});

Fix - react key 問題
Fix - react key 問題
