Simuler Matériel-UI Tabbar Cliquez programme/avec raccourci

Question

J'utilise matériel onglets Institut dans mon électronique/réagir application comme si:

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

Je veux maintenant appuyer sur un raccourci, et ce faisant, changer la vue. Par exemple, disons que Tab1 est actif et que View1 est rendu. Je clique alors sur Cmd + 2 puis Tab2 s'ouvre (avec View2 étant actif), exactement de la même manière que si j'avais cliqué sur Tab2. Comment ferais-je cela? J'ai essayé quelques choses, et j'aurais une idée comment faire ceci sans interface utilisateur matérielle, mais je suis confus par la syntaxe matérielle d'IU.

Answer 1

Vous pouvez envoyer 1 prop à Tabs pour contrôler ce que l'onglet ouvre:

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

ajouter ensuite une méthode pour changer sa valeur:

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

Answer 2

Vous devez définir la méthode de gestionnaire-pour la gestion des événements du clavier et mettre à jour l'état si a été pressé la combinaison de touches appropriées. Regardez cet exemple de travail - https://jsfiddle.net/2m8ho95r/1/ (Remarque: vous devez cliquer dans la zone de résultat à la page jsFiddle avant raccourci en appuyant sur):

Voici les onglets changeront après Ctrl/Cmd + 1 et Ctrl/Cmd + 2. Si vous avez besoin seulement Cmd - enlever || 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> 
    ); 
    } 
}