javascript - React unselect from list while selecting another item - Stack Overflow

admin管理员组

文章数量:1395893

I am creating a list where you can select from (button style) you can only click to one button. I am able to highlight the item from list when is active. What I can't seem to unselect if I happen to choose another item from the list. Here is my code for my ponent:

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

I am rendering this into a main ponent and passing the props from that ponent however the state of active true or false is being managed inside the CustomerRolo ponent. Here is the main ponent:

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

I am creating a list where you can select from (button style) you can only click to one button. I am able to highlight the item from list when is active. What I can't seem to unselect if I happen to choose another item from the list. Here is my code for my ponent:

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

I am rendering this into a main ponent and passing the props from that ponent however the state of active true or false is being managed inside the CustomerRolo ponent. Here is the main ponent:

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

• javascript
• user-interface
• uiview
• reactjs

Share Improve this question Follow edited Jan 15, 2016 at 16:41 jkris 6,58911 gold badge2424 silver badges3131 bronze badges asked Jan 15, 2016 at 16:17 Rafael FloresRafael Flores 7711 silver badge88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Rather then storing the active state in the list item store it in the parent instead. So the list item takes two props onToggle and active these will essentially the this.state.active and this.handleToggle

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

now move those to the parent list ponent (your second one I presume) so the parent stores which customer is active and sets that prop from state

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

本文标签： javascriptReact unselect from list while selecting another itemStack Overflow