ReactJS OnKeyPress pour déclencher un bouton presse

Question

Je suis très nouveau à ReactJS et j'essaie juste de faire quelques petites choses pour comprendre plus.

Je me demandais si le OnKeyPress peut déclencher une pression sur un bouton. J'ai vu quelques questions similaires mais ce que le OnKeyPress déclenché était juste un console.log ou une alerte. Donc, je n'étais pas sûr de savoir comment déclencher le bouton.

C'est ce que j'ai jusqu'à présent:

class Form extends React.Component { 
    onButtonPress = (e) => { 
    // this is just an example of what happens when the button is pressed. 
    this.setState({isClicked: true}); 
    } 

    keyPress = (event) => { 
    if (event.key == 'Enter'){ 
     // How would I trigger the button that is in the render? I have this so far. 
     this.onButtonPress(); 
    } 
    } 

    render() { 
    return (
     <div> 
     <div className="fieldForm"> 
      <input 
      value={name} 
      type="name" 
      onKeyPress={this.keyPress} 
      /> 
     </div> 
     <Button onClick={this.onButtonPress}>Submit</Button> 
     </div> 
    ) 
    } 
} 

S'il vous plaît noter que je ne mentionnaient pas tout ici, comme le constructeur, les accessoires ou les attributs objet état.

Le but de ceci est de donner l'impression que le bouton a été cliqué. Lorsque le bouton est cliqué, il affiche un petit signe de chargement sur le bouton. Je veux que la même chose se produise si je devais appuyer sur Entrée (avec le signe de chargement sur le bouton, c'est pourquoi je veux que le bouton soit pressé).

Est-ce possible?

Answer 1

Le déclenchement par programme d'événements DOM n'est pas quelque chose que vous devriez faire, sauf si vous avez des besoins très spécifiques.

Les deux onKeyPress et onClick sont des gestionnaires d'événements, vous pouvez faire tout ce que vous voulez quand un événement se produit. Je voudrais simplement appeler une fonction qui définit l'état que vous voulez des deux gestionnaires.

Voici un exemple:

class Form extends React.Component { 
    handleFormSubmit =() => { 
    this.setState({ isClicked: true }); 
    }; 

    handleButtonPress =() => { 
    this.handleFormSubmit(); 
    }; 

    handleKeyPress = event => { 
    if (event.key == 'Enter') { 
     this.handleFormSubmit(); 
    } 
    }; 

    render() { 
    return (
     <div> 
     <div className="fieldForm"> 
      <input value={name} type="name" onKeyPress={this.handleKeyPress} /> 
     </div> 
     <Button onClick={this.handleButtonPress} loading={this.state.Load}> 
      Submit 
     </Button> 
     </div> 
    ); 
    } 
} 

Answer 2

Si vous avez aucun autre moyen et vous devrait cliquez sur cet élément pour une raison vague et la méthode qui elas dit ne fonctionne pas pour toi. essayez ceci:

onButtonPress = (e) => { 
    console.log('hi hi') 
    } 

    handleKeyPress = (event) => { 
    if (event.key === 'Enter') { 
     this.refs.but.click() 
    } 
    } 

    render() { 
    return (
     <Layout> 
     <div> 
      <div className="fieldForm"> 
      <input 
       value={'name'} 
       type="name" 
       onKeyPress={(e) => this.handleKeyPress(e)} 
      /> 
      </div> 
      <Button onClick={this.onButtonPress} ref="but">Submit</Button> 
     </div> 
     </Layout> 
    ) 
    }