以编程方式/使用快捷方式模拟 Material-UI 选项卡栏答案

【问题标题】：Simulate Material-UI Tabbar Click programmatically / with Shortcut以编程方式/使用快捷方式模拟 Material-UI 选项卡栏
【发布时间】：2017-09-26 16:00:40
【问题描述】：

我在电子/反应应用程序中使用材料 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 语法感到困惑。

【问题讨论】：

标签： javascript reactjs react-redux material-ui

【解决方案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 })
}

【讨论】：

选项卡上的value属性也需要定义。

【解决方案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>
    );
  }
}

【讨论】：

【解决方案3】：

http://www.material-ui.com/#/components/tabs，Tabs 属性部分包含对 value 属性的解释 -

使 Tabs 可控并选择 value prop 与此 prop 匹配的选项卡。

以上在代码sn-p中解释-

// ...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: ""}) 可用于以编程方式选择所需的选项卡。

【讨论】：