1

通常，每当单击选项卡列表中的选项卡时，都会显示选项卡面板中相应索引中的文本。例如，如果您单击“选项 2”，将显示文本“面板 2”。现在，只要单击选择元素中的任何选项，我都希望发生同样的事情。我尝试在选项卡列表中的选择标记中添加所有选项，但是当我这样做时，它会将名称更改为“[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>
4

1 回答 1

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>
    );
  }
于 2020-04-30T10:16:23.133 回答