反应 - 在任何时候只有一个“活动”子组件

我有一个父组件，它包含许多子组件。我想在点击时将一个active className添加到子组件。反应 - 在任何时候只有一个“活动”子组件

这是行得通的，但问题是每个子组件都可以有一个active classname。每次只有一个组件应该是active。

有没有人有任何想法如何解决这个问题？

请参阅下面的代码。

class MyComponent extends Component { 

    constructor(props) { 
     super(props); 
     this.addActiveClass= this.addActiveClass.bind(this); 

     this.state = { 
      active: false, 
     }; 
    } 

    addActiveClass() { 
     const currentState = this.state.active; 
     this.setState({ active: !currentState }); 
    }; 

    render() { 
     return (
      <div 
       className={this.state.active ? 'active': null} 
       onclick={this.addActiveClass} 
      > 
       <p>{this.props.text}</p> 
      </div> 
     ) 
    } 
} 

class Test extends Component { 
    render() { 
     return (
      <div> 
       <MyComponent text={'1'} /> 
       <MyComponent text={'2'} /> 
       <MyComponent text={'3'} /> 
       <MyComponent text={'4'} /> 
      </div> 
     ); 
    } 
}

来源

2017-03-07 peter flanagan

将活动功能添加到您的Test组件。

在那里你可以检查是否已经有active组件。

class MyComponent extends React.Component { 
 

 
    render() { 
 
     return <div 
 
      id={this.props.id} 
 
      className={this.props.active ? 'active': null} 
 
      onClick={this.props.handleClick} > 
 
       {this.props.text} 
 
     </div> 
 
    } 
 
} 
 

 
class Test extends React.Component { 
 

 
    constructor(props) { 
 
     super(props); 
 

 
     this.state = { 
 
      components: [ 
 
       {id: 1, text: 1}, 
 
       {id: 2, text: 2}, 
 
       {id: 3, text: 3}, 
 
       {id: 4, text: 4} 
 
      ], 
 
      activeID: null 
 
     }; 
 
    } 
 
    
 
    handleClick(e) { 
 
     // If there is already active component ID, don't set another one! 
 
     // We support only one active ID. 
 
     if (this.state.activeID !== null) return; 
 
     
 
     const id = parseInt(e.target.id); 
 
     this.setState({ 
 
      activeID: id 
 
     }); 
 
    } 
 
    
 
    renderComponents() { 
 
     return (this.state.components.map(c => 
 
      <MyComponent 
 
       id={c.id} 
 
       active={c.id === this.state.activeID} 
 
       text={c.text} 
 
       handleClick={this.handleClick.bind(this)} />)); 
 
    } 
 
    
 
    renderActiveIDText() { 
 
     return (this.state.activeID ? <p>{"Active Component ID: " + this.state.activeID}</p> : null); 
 
    } 
 

 
    render() { 
 
     return <div> 
 
      {this.renderActiveIDText()} 
 
      {this.renderComponents()} 
 
     </div> 
 
    } 
 
} 
 

 
ReactDOM.render(<Test />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>

来源

2017-03-07 08:59:07

你会怎么做呢？ –

我会在几分钟内提供一个例子。 :) –

@peterflanagan你可以检查这个例子。 –

反应 - 在任何时候只有一个“活动”子组件

回答

相关问题