如何删除特定的子 React 组件

JSFiddle： https://jsfiddle.net/morahood/cp569zg6/38/

当我从ServiceList组件中删除子ServiceItem组件时，我遇到了一个问题，即列表中的最后一个ServiceItem被删除而不是目标ServiceItem。上面的 JSFiddle 链接将有助于理解该问题，只需确保在输入字段中输入一些可识别信息，以便查看已删除的内容。

如何修复我的应用程序以删除相应的组件？

var ServiceForm = React.createClass({
  render: function() {
    return (
      <form onSubmit={ this.handleFormSubmission } >
        { this.renderServiceItemList() }
        <div className="btn btn-default btn-sm" onClick={ this.addServiceItem }>+ Append New Service Item</div>
        <button type="submit" className="btn btn-success btn-lg pull-right">Submit</button>
      </form>
    );  
  },
  getInitialState: function() {
    return ({
      serviceItems: [this.renderServiceItem]
    });
  },
  handleFormSubmission: function(event) {
    event.preventDefault();
    var data = this.refs.service_item_list.getAllServiceItems();
    var json = {
      "service_request" : {
        "services" : data,
        "additional_recipients" : 'test@example.com',
        "comments" : 'Hello world!'
      }
    };
    console.log(json);
  },

  addServiceItem: function(event) {
    var copy = this.state.serviceItems.slice();
    copy.push(this.renderServiceItem);
    this.setState({
      serviceItems: copy
    });
  },
  renderServiceItem: function(item, i) {
    return (
      <ServiceItem removeServiceItem={ this.removeServiceItem } data={item} key={i} ref={"service_item_" + i} />
    );
  },
  removeServiceItem: function(event) {
    var index = parseInt(event.target.value, 10);
    var copy = this.state.serviceItems.slice();
    copy.splice(index, 1);
    this.setState({
      serviceItems: copy
    });
  },
  renderServiceItemList: function() {
    return (
      <ServiceItemList serviceItems={ this.state.serviceItems }
                  renderServiceItem={ this.renderServiceItem }
                  removeServiceItem={ this.removeServiceItem }
                                ref="service_item_list" />
    );
  }
});


var ServiceItemList = React.createClass({
  render: function() {
    var content;
    if (this.props.serviceItems.length < 1) {
      content = <div className="empty-service-list">There are no service items, click on append new service item below!</div>;
    } else {
      content = this.props.serviceItems.map(this.props.renderServiceItem);
    }  

    return (
      <div>
        { content }
      </div>
    );
  },
  getAllServiceItems: function() {
    var data = [];
    for (var ref in this.refs) {
      data.push(this.refs[ref].serializeItem());
    }
    var merged = [].concat.apply([], data);
    return(merged);
  }
});


var ServiceItem = React.createClass({
  render: function() {
    return (
      <div className="row">
        <div className="col-sm-3">
          <div className="form-group service-item">
            <label>Service Item </label>
            <select multiple ref="service_types" className="form-control">
              <option>Oil Change</option>
              <option>Tire Rotation</option>
              <option>New Wiper Blades</option>
            </select>
          </div>
        </div>
        <div className="col-sm-3">
          <div className="form-group">
            <label>Customer </label>
            <select ref="customer" className="form-control">
              <option>Troy</option>
              <option>Dave</option>
              <option>Brandon</option>
            </select>
          </div>
        </div>        
        <div className="col-sm-3">
          <div className="form-group">
            <label>Manufacturer </label>
            <div className="input-group">
               <input ref="manufacturer" type="text" className="form-control" />
            </div>
          </div>
        </div>

        <div className="col-sm-3">
          <div className="form-group">
            <label>Model </label>
            <div className="input-group">
               <input ref="model" type="text" className="form-control" />
            </div>
            <a href="#" onClick={ this.props.removeServiceItem }>
                <span aria-hidden="true" className="remove-fields" onClick={ this.props.removeServiceItem }>&times;</span>
            </a>
          </div>
        </div>
      </div>
    );
  },
  getInitialState: function() {
    return({
      service_types: [],
      customer: '',
      manufacturer: '',
      model: ''
    });
  },
  serializeItem: function() {
    var customer = this.refs.customer.value;
    var manufacturer = this.refs.manufacturer.value;
    var model = this.refs.model.value;
    var selected = this.getSelectedServiceItems();
    var services = this.getSelectedServiceItems().map(function(item) {
        return (
          {
            "service" : {
              "service_type" : item,
              "customer" : customer,
              "manufacturer" : manufacturer,
              "model" : model
            }      
          }
        )
        });
    return(services);
  },
  getSelectedServiceItems: function() {
        var select = this.refs.service_types; 
        var values = [].filter.call(select.options, function (o) {
      return o.selected;
    }).map(function (o) {
      return o.value;
    });
    return(values);
  }
});


ReactDOM.render(
  <ServiceForm />,
  document.getElementById('container')
);