javascript - 选择另一个项目时从列表中取消选择

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

我将它渲染到一个主要组件中，并从该组件传递 Prop ，但是在 CustomerRolo 组件内部管理事件 true 或 false 的状态。这是主要组件:

    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

与其将事件状态存储在列表项中，不如将其存储在父 中。所以列表项需要两个 Prop onToggle 和 active 这些本质上是 this.state.active 和 this.handleToggle

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

现在将它们移动到父列表组件(我想是你的第二个)，这样父存储哪个客户是活跃的并从状态设置该 Prop

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