javascript - タブを 1 つアクティブに設定すると、すべての偽のアルゴリズム Meteor React が有効になります

Question

タブをアクティブにして、他のすべてのタブをオフにします。現在、一度に1つずつオフにしてオンにする場所でのみ機能しています。

私はこれを行う方法を理解しようとしています。親コンポーネントを関数に渡してから、そのすべての子の className プロパティにアクセスできる方法があると考えていましたか?? 現在私は持っています：

import React from 'react';
import ReactDOM from 'react-dom';


export default class TestContainer extends React.Component{


        setActive(event){
           event.preventDefault();

           //getting id from component
           let isActive = event.target.id;


           if(event.currentTarget.className === "list-group-item text-center active"){
                   event.currentTarget.className = "list-group-item text-center";
           } else if(event.currentTarget.className === "list-group-item text-center") {
                   event.currentTarget.className = "list-group-item text-center active";
           }

        }



        render(){   




         return (                               

                <div className="col-lg-6 col-md-6 col-sm-6 col-xs-6 bhoechie-tab-container    scroll-y">
                        <div className="col-lg-2 col-md-2 col-sm-2 col-xs-2 bhoechie-tab-menu">
                                <div className="list-group">
                                        <a href="#" onClick={this.setActive} id="eyes" className="list-group-item text-center active">
                                                <h4 className="glyphicon glyphicon-eye-close"></h4><br/>1
                                        </a>
                                        <a href="#" onClick={this.setActive} id="hair" className="list-group-item text-center">
                                                <h4 className="glyphicon glyphicon-tint"></h4><br/>2
                                        </a>
                                        <a href="#" onClick={this.setActive} id="mouth" className="list-group-item text-center">
                                                <h4 className="glyphicon glyphicon-minus"></h4><br/>3
                                        </a>
                                        <a href="#" onClick={this.setActive} id="clothing" className="list-group-item text-center">
                                                <h4 className="glyphicon glyphicon-user"></h4><br/>4
                                        </a>
                                        <a href="#" onClick={this.setActive} id="props" className="list-group-item text-center">
                                                <h4 className="glyphicon glyphicon-gift"></h4><br/>5
                                        </a>
                                </div>
                        </div>
)}