Как связать вкладку реагирования с выпадающим списком?

Question

Обычно при каждом нажатии вкладки в списке вкладок отображается текст в соответствующем индексе на панели вкладок. Например, если вы нажмете «Вариант 2», появится текст «Панель 2». Теперь я хочу, чтобы то же самое происходило всякий раз, когда щелкает любая опция в элементе select. Я попытался добавить все опции в теге выбора внутри списка вкладок, но когда я это сделал, он поменял имена на «[объект]», и при каждом щелчке по опции вкладка не изменялась.

Можете ли вы помогите мне с этим спасибо

<Tabs defaultIndex={0} onSelect={index => console.log(index)}>
    <div className = "dropMenu">
        <select  className = 'tabSelect' value={this.state.value} onChange={this.tabSwitch}>
            <option value="Option">
                Option
            </option>
            <option value="Option2">
                Option 2
            </option>
            <option value="Option3">
                Option 3
            </option>
        </select>
    </div>
    <TabList>
        <Tab>
            Option
        </Tab>
        <Tab>
            Option 2
        </Tab>
        <Tab>
            Option 3
        </Tab>
    </TabList> 
    <div className='Panel'>
        <TabPanel>
            Panel 
        </TabPanel>
        <TabPanel>
            Panel 2
        </TabPanel>
        <TabPanel>
            Panel 3
        </TabPanel>
    </div> 
</Tabs>

Answer 1

Я внес некоторые изменения в ваш код. Вы можете сделать это так:

  constructor(props) {
    super(props);

    this.state = {
      value: 0,
    };
  }

  setValue = (index) => {
    this.setState({
      value: index,
    });
  };

  render() {
    return (
      <Tabs
        selectedIndex={this.state.value}
        onSelect={(index) => console.log(index)}
      >
        <div className="dropMenu">
          <select
            className="tabSelect"
            onChange={(e) => {
              this.setValue(e.target.selectedIndex);
            }}
          >
            <option value="Option">Option</option>
            <option value="Option2">Option 2</option>
            <option value="Option3">Option 3</option>
          </select>
        </div>
        <TabList>
          <Tab onClick={() => this.setValue(0)}>Option</Tab>
          <Tab onClick={() => this.setValue(1)}>Option 2</Tab>
          <Tab onClick={() => this.setValue(2)}>Option 3</Tab>
        </TabList>
        <div className="Panel">
          <TabPanel> Panel</TabPanel>
          <TabPanel>Panel 2</TabPanel>
          <TabPanel>Panel 3</TabPanel>
        </div>
      </Tabs>
    );
  }