如何 link 将选项卡反应到下拉列表？

Question

通常只要单击选项卡列表中的选项卡，就会显示选项卡面板中相应索引中的文本。例如，如果您单击 "Option 2"，将显示文本 "Panel 2"。现在，只要单击 select 元素中的任何选项，我都希望发生同样的事情。我尝试在标签列表中的 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>

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

如何 link 将选项卡反应到下拉列表？

How to link a react tab to a dropdown?

javascript

reactjs

react-tabs