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组件内部管理活动的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

而是将活动状态存储在列表项中而不是将其存储在父中。所以列表项有两个道具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 })
}

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

1 个答案: