反应从列表中取消选择另一个项目

Question

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

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> 
     ) 
    } 
}); 

我渲染它变成主要成分，但是从积极的真或假的状态正在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> 
    ) 
} 
    }) 

Answer 1

相反然后存储在所述列表项存储它的活动状态中父代替。所以列表项需要两个道具onToggle和active这些将主要的this.state.active和this.handleToggle

render: function() { 
    return (
    <li 
     style={this.props.active ? aStyle : iStyle} 
     onClick={this.props.onToggle} 
    > 
     hi 
    </li> 
) 
} 

现在搬完父列表组件（你的第二个我相信），所以家长卖场哪些客户是活动的，并设置道具从状态

render: function() { 
    var active = this.state.activeIndex; 

    var Rolo = customers.map(function(customer, index){ 
    return (
    <CustomerRolo 
     active={index === active} 
     onToggle={this.handleToggle.bind(null, idx}/> 
    ) 
    }, this) 
}, 

handleToggle: function(index) { 
    this.setState({ activeIndex: index }) 
}