在选择其他项目时从列表中取消选择

我正在创建一个列表，您可以在其中选择（按钮样式），您只能单击一个按钮。当活动时，我能够突出显示列表中的项目。如果我碰巧从列表中选择另一个项目，我似乎无法取消选择。这是我的组件的代码：

var styles = {
    active: {
      backgroundColor: '#337ab7',
      color: '#ffffff'
    },
    inactive: {
      backgroundColor: 'inherit',
      color: 'inherit'
    }
};
var CustomerRolo = React.createClass({
  getInitialState() {
    return   {active: false}
  },
  handleToggle: function(e) {
    e.preventDefault();
    //console.log(lastSelection)
    this.setState({ active: !this.state.active});
    console.log(React.findDOMNode(this.refs.active))
  },
  render: function(){
    const stateStyle = this.state.active ? styles.active : styles.inactive
    return(
        <a href="" className='anker'  onClick={this.handleToggle}>
            <div id='rolo' style = {stateStyle}>
                    <h5 className="listitems"><strong>{this.props.customer.lastname + ", " + this.props.customer.name}</strong></h5>
                    <p>{this.props.customer.mobile}</p>
                    <hr/>
             </div>
        </a>
       )
   }
 });

我将其渲染到一个主组件中并从该组件传递 props，但是活动 true 或 false 的状态正在 CustomerRolo 组件中进行管理。这是主要组件：

    var Jobs = React.createClass({
getInitialState() {
    return {jobs: this.props.jobs,
            customers: this.props.customers}
},
addCustomer: function(customer) {
    var customers = React.addons.update(this.state.customers, { $push: [customer] })
    this.setState({ customers: customers });
},
buttonStyle:  {
    backgroundColor: 'lightblue',
    paddingTop: '5px',
    paddingBottom: '5px',
    width: '150px',
    height: '35px',
    marginTop: '0',
    marginBottom: '1px',
    borderRadius: '5px'
},
render: function() {
    return(
        <div className="container">
            <div className="row">
                <div className="col-md-10">
                    <h2 className="title">Jobs</h2>
                </div>
            </div>
            <div className="row">
                <div className="col-md-4">
                    <CustomerForm handleNewCustomer={this.addCustomer}/>
                </div>
            </div>
            <div className="row">
                    <div id='customerrolo' className="col-md-4">
                        {this.state.customers.map(function(customer, index) {
                            return <CustomerRolo  key={index} customer={customer}/>}.bind(this))}
                    </div>
                <div id = "years" className="col-md-4">
                    {this.props.years.map(function(year){
                    return <Years key={year['Year']} year={year}/>}.bind(this))}
                </div>
            </div>
            <div className="row">
                <div className="col-md-10">

                    <table className="table table-hover">
                        <thead>
                        <tr>
                            <th>Customer</th>
                            <th>Plate</th>
                            <th>Make</th>
                            <th>Model</th>
                            <th>Created</th>
                            <th>Status</th>
                            <th>Progress</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        {this.state.jobs.map(function(job) {
                            return <Job key={job.id} job={job}/>}.bind(this))}
                        </tbody>
                        </table>
                    </div>
                </div>
        </div>
    )
}
  })