如何设置选项卡的默认索引

Question

我具有要过滤的过滤器选项，搜索后它不停留在当前页面中 现在，在过滤器之后，它应该留在同一标签

我尝试了npm install react-bootstrap-tabs --save 这个可以解决这个问题

这是我的代码，请尝试修复此Tnx 为此也尝试了一些插件，但没有帮助解决此问题

   import React, { Component } from 'react';
  //import { Switch, Route } from 'react-router-dom';
   import axios from 'axios';
   import LoadingMsg from '../helpers/LoadingMsg';
   import {SpaceDiv} from '../helpers/Generic';
   import {UIInputDropDown, UIInputTextIMG, UIInputTextDrop, 
    UIInputTextDropSearch} from '../helpers/UI';
   import ViewApplicants from './applicants/ViewApplicants';
   import ViewJobs from './applicants/ViewJobs';
  import ViewCVs from './applicants/ViewCVs';
  import PostJob from './applicants/PostJob';
   import PostApplicant from './applicants/PostApplicant';

  import ManageApplicants from './applicants/ManageApplicants';

 import Dropdown from 'react-dropdown';
 import 'react-dropdown/style.css';

import {Tabs, Tab} from 'react-bootstrap-tabs';
import ToggleDisplay from 'react-toggle-display';

export default class Applicants extends Component {

 constructor(props) {
    super(props);
    this.state = {
      screenData: [],
        searchResults: [],
        handleSelect: [],
        searchApplicantResults: [],
        searchManageApplicantResults: [],
        searchJobResults: [],
        searchCVResults: [],
        roleList: null,
        employeeDetailItemData: null,
        show: true,
        key: 1 | props.activeKey
    };
      this.handleSelect = this.handleSelect.bind(this);

  }




 handleSelect (key) {
   console.log("selected " + key);
    this.setState({key})
}



return (


  <div className="hrs_applicants">

    <Tabs defaultActiveKey={this.state.key} id="default" onSelect={this.handleSelect}  className="hrs_applicants_tab">
      <Tab eventKey={0} label="UPLOADED CVS">
        <div className="hrs_uploadedcv_header">
          <div className="hrs_uploadedcv_header_col"><img src="/images/img_close.png" alt="" className="warning" /></div>
          <div className="hrs_uploadedcv_header_col">
            <span>Generic GDPR and privacy policy about CVs and instructions about converting CV to application Lorem ipsum consectetur adipiscing edit. Aenean aiquet hendrent consequet Suspendisse potenti. Sed vitse turpis id</span>
          </div>
        </div>
        {resultsCVs}
      </Tab>

      <Tab eventKey={1} label="VIEW ALL APPLICANTS">
        <div className="hrs_applicants_filter_container">
          <div className="hrs_applicants_search_filter">
            <div className="hrs_applicants_search">
              <img src="../../images/search_icon_sm.png" alt="" className="notFitIconImg" />
              <input type="text" id="APPLICANT_search" onChange={this.onSearchSearchSelected.bind(this)} placeholder="SEARCH BY NAME, TITLE, SKILL OR COUNTRY " className="hrs_input_full-length" />
            </div>
            <div className="clear"></div>
          </div>
          <div className="hrs_applicants_filter" style={{ textTransform: 'uppercase'}}>
            <Dropdown options={locations}  onChange={this.onSearchLocationSelected.bind(this)} value={defaultOption} placeholder="LOCATION" />
          </div>
          <div className="hrs_applicants_filter">
            <Dropdown options={yearofexperience} onChange={this.onSearchYearofExperienceSelected.bind(this)} value={defaultOption} placeholder="YEARS OF EXPERIENCE" />
          </div>
          <div className="hrs_applicants_filter" style={{ textTransform: 'uppercase'}}>
            <span className="hrs_applicants_sortby_txt">SORT BY: </span>
            <span className="hrs_applicants_sortby">
              <Dropdown options={sortby} onChange={this.onSearchSortBySelected.bind(this)} value={defaultOption} placeholder="" />
            </span>
          </div>
        </div>
        {resultsApplicants || <div className='noresult'>No results found, please broaden your search</div>}
      </Tab>

      <Tab eventKey={2} label="VIEW ALL JOBS">
        <ToggleDisplay  show={this.state.show} tag="section">
          <div className="hrs_applicants_filter_container">
            <div className="hrs_applicants_filter">
              <Dropdown options={company} onChange={this.onSearchCompanySelected.bind(this)} value={defaultOption} placeholder="COMPANY" />
            </div>
            <div className="hrs_applicants_filter">
              <Dropdown options={jobtitle} onChange={this.onSearchJobTitleSelected.bind(this)} value={defaultOption} placeholder="TITLE" />
            </div>
            <div className="hrs_applicants_filter">
              <Dropdown options={salary} onChange={this.onSearchSalarySelected.bind(this)} value={defaultOption} placeholder="SALARY" />
            </div>
          </div>
          {resultsJobs || <div className='noresult'>No results found, please broaden your search</div>}

        </ToggleDisplay >
        <ToggleDisplay  hide={this.state.show} tag="section">
          {resultsManageApplicants || <div className='noresult'>No results found, please broaden your search</div>}
        </ToggleDisplay >
      </Tab>

      <Tab eventKey={3} label="POST A JOB">
        <PostJob />
      </Tab>

      <Tab eventKey={4} label="POST AN APPLICANT">
        <PostApplicant />
      </Tab>

    </Tabs>

  </div>
); 

} }