反應從列表中取消選擇另一個項目

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