小编Raf*_*res的帖子

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

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() …