Javascript 如何将react选项卡链接到下拉列表？

通常，每当单击tablist列表中的选项卡时，都会显示tablist面板中相应索引中的文本。例如，如果单击“选项2”，将显示文本“面板2”。 现在，我希望每当单击select元素中的任何选项时，都会发生同样的事情。 我尝试将所有选项添加到tablist中的select标记中，但当我添加时，它会将名称更改为“[object]”，并且每当单击该选项时，该选项卡都不会更改

你能帮我解决这个问题吗 多谢各位

<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>

console.log（索引）}>
选项
选择2
选择3
选项
选择2
选择3
面板
小组2
小组3

我对您的代码做了一些更改。您可以这样做：

  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>
    );
  }

构造函数（道具）{
超级（道具）；
此.state={
值：0，
};
}
设置值=（索引）=>{
这是我的国家({
值：索引，
});
};
render（）{
返回(
console.log（索引）}
>
{
此.setValue（例如，target.selectedIndex）；
}}
>
选项
选择2
选择3
此.setValue（0）}>选项
this.setValue（1）}>选项2
this.setValue（2）}>选项3
面板
小组2
小组3
);
}

我对您的代码做了一些更改。您可以这样做：

  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>
    );
  }

构造函数（道具）{
超级（道具）；
此.state={
值：0，
};
}
设置值=（索引）=>{
这是我的国家({
值：索引，
});
};
render（）{
返回(
console.log（索引）}
>
{
此.setValue（例如，target.selectedIndex）；
}}
>
选项
选择2
选择3
此.setValue（0）}>选项
this.setValue（1）}>选项2
this.setValue（2）}>选项3
面板
小组2
小组3
);
}