我无法在反应中设置默认选项卡

Question

我在REACT中创建了简单的标签。

当我点击另一个标签然后选择了该标签但我想设置默认选择标签，然后未选择该标签。

这里我正在编写按下按钮时调用的更改状态的选项卡功能。

 class Tab extends React.Component {
 constructor(props) {
     super(props);
     this.state = {
        selected: 0
     }
     this.myRef = React.createRef();
}
     tab = (tabSelected) => {
        this.setState({selected: tabSelected});
     }

     render(){
         var toRender = <div>Zero</div>;

         if(this.state.selected===1) {
             toRender = <div>One</div>;
             document.getElementById("zero").setAttribute("selected", false);
             document.getElementById("one").setAttribute("selected", true);
             document.getElementById("two").setAttribute("selected", false);
             document.getElementById("three").setAttribute("selected", false);
             document.getElementById("four").setAttribute("selected", false);
         }
         else if(this.state.selected===2) {
             toRender =  <div>Two</div> ;
             document.getElementById("zero").setAttribute("selected", false);
             document.getElementById("one").setAttribute("selected", false);
             document.getElementById("two").setAttribute("selected", true);
             document.getElementById("three").setAttribute("selected", false);
             document.getElementById("four").setAttribute("selected", false);
         }
         else if(this.state.selected===3) {
             toRender =  <div>Three</div> ;
             document.getElementById("zero").setAttribute("selected", false);
             document.getElementById("one").setAttribute("selected", false);
             document.getElementById("two").setAttribute("selected", false);
             document.getElementById("three").setAttribute("selected", true);
             document.getElementById("four").setAttribute("selected", false);
         }
         else if(this.state.selected===4) {
             toRender =  <div>Four</div> ;
             document.getElementById("zero").setAttribute("selected", false);
             document.getElementById("one").setAttribute("selected", false);
             document.getElementById("two").setAttribute("selected", false);
             document.getElementById("three").setAttribute("selected", false);
             document.getElementById("four").setAttribute("selected", true);
         }
         else  {
            toRender =  <div>Zero</div> ;

         }
         return(
         <div>
            <div>
                {toRender}
            </div>
            <div>
                     <button onClick={()  =>this.tab(0)} ref={this.myRef = 0} selected="true" id="zero">0</button>
                     <button onClick={() => this.tab(1)} ref={this.myRef = 1} selected="false" id="one" >1</button>
                     <button onClick={() => this.tab(2)} ref={this.myRef = 2} selected="false" id="two">2</button>
                     <button onClick={() => this.tab(3)} ref={this.myRef = 3} selected="false" id="three">3</button>
                     <button onClick={() => this.tab(4)} ref={this.myRef = 4} selected="false" id="four">4</button>
            </div>
            </div>

         )

        }

}

ReactDOM.render（，document.getElementById（“root”））;