React - 一度に1つの "アクティブな"子コンポーネントのみ

Question

私は多くの子コンポーネントを保持する親コンポーネントを持っています。クリックしたときに子コンポーネントにactive classNameを追加します。

これは動作しますが、各子コンポーネントにactiveクラス名を付けることができるという問題があります。そのたびに1つのコンポーネントだけが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> 
     ); 
    } 
} 

Answer 1

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>