Question

我在电子/反应应用程序中使用了材质UI选项卡，如下所示：

        <Tabs>
          <Tab label="View1" >
            <View1 />
          </Tab>
          <Tab
            label="View2">
            <View2 />
          </Tab>
          <Tab label="View3" >
            <View3 />
          </Tab>
          <Tab label="View4" >
            <View4 />
          </Tab>
        </Tabs>

我现在想要按快捷键，然后更改视图。因此，例如，假设Tab1处于活动状态并且呈现View1。然后按Cmd + 2然后Tab2将打开（View2处于活动状态），就像我点击Tab2一样。我该怎么做？我已经尝试了一些东西，我想知道如何在没有材料UI的情况下做到这一点，但我对材料UI语法感到困惑。

Answer 1

您可以向Tabs发送1道具以控制打开的标签：

    <Tabs value={this.state.tabIndex}>
      <Tab label="View1" >
        <View1 />
      </Tab>
      <Tab
        label="View2">
        <View2 />
      </Tab>
      <Tab label="View3" >
        <View3 />
      </Tab>
      <Tab label="View4" >
        <View4 />
      </Tab>
    </Tabs>

然后添加一个方法来更改其值：

changeTab = (tabIndex) => {
  this.setState({ tabIndex })
}

Answer 2

如果按下了适当的组合键，您应该定义处理键盘事件的处理程序方法和更新状态。看看这个工作示例 - https://jsfiddle.net/2m8ho95r/1/（注意：你应该在快捷键之前点击jsfiddle页面的结果区域）：

此处标签将在Ctrl/Cmd + 1和Ctrl/Cmd + 2后更改。如果您只需要Cmd - 请删除|| event.ctrlKey：

class TabsExampleControlled extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'a',
    };

    this.handleKeyPress = this.handleKeyPress.bind(this);
  }

  componentDidMount() {
    document.body.addEventListener('keydown', this.handleKeyPress);
  }

  componentWillUnmount() {
    document.body.removeEventListener('keydown', this.handleKeyPress);
  }

  handleKeyPress(event) {
    if ((event.metaKey || event.ctrlKey) && event.keyCode === 49) { // CTRL+1 or CMD+1
        event.preventDefault();
        this.setState({ value: 'a' });
    }

    if ((event.metaKey || event.ctrlKey) && event.keyCode === 50) { // CTRL+2 or CMD+2
    event.preventDefault();
        this.setState({ value: 'b' });
    }
  }

  render() {
    return (
      <Tabs
        value={this.state.value}
      >
        <Tab label="Tab A" value="a">
          <div>
            <h2 style={styles.headline}>Controllable Tab A</h2>
            <p>
              Tabs are also controllable if you want to programmatically pass them their values.
              This allows for more functionality in Tabs such as not
              having any Tab selected or assigning them different values.
            </p>
          </div>
        </Tab>
        <Tab label="Tab B" value="b">
          <div>
            <h2 style={styles.headline}>Controllable Tab B</h2>
            <p>
              This is another example of a controllable tab. Remember, if you
              use controllable Tabs, you need to give all of your tabs values or else
              you wont be able to select them.
            </p>
          </div>
        </Tab>
      </Tabs>
    );
  }
}

Answer 3

http://www.material-ui.com/#/components/tabs，Tabs属性部分包含有关value属性的说明 -

使标签可控，并选择其值道具与此道具匹配的标签。

以上在代码片段中解释 -

// ...inside a component
state = {
    selectedTab: "tab1" // by default, tab1 to be selected.
};

handleTabChange = (tabValue) => {
    this.setState({selectedTab: tabValue});
};

// Inside render()
<Tabs value={this.state.selectedTab} onChange={this.handleTabChange}>
    <Tab label="Tab 1" value="tab1">
        <div>...</div>
    </Tab>
    <Tab label="Tab 2" value="tab2">
        <div>...</div>
    </Tab>
<Tabs>

通过上述布线，可以使用setState（{selectedTab：“”}）以编程方式选择所需的选项卡。

模拟Material-UI Tabbar单击以编程方式/使用快捷方式

3 个答案: