comment désactiver la clé <ENTER> pour la soumission de formulaire dans react-bootstrap

Question

Dans l'extrait suivant, j'ai un certain nombre de formulaires de saisie qui sont de type texte. Si l'utilisateur clique, il semble que je reçois le même événement synthétique que s'ils appuyaient sur le bouton de soumission. Je veux ignorer le soumettre comme un formulaire, et permettre seulement d'appuyer sur le bouton SOUMETTRE. (J'ai supprimé certains des groupes de formulaires pour réduire l'exemple).

Dans tous les cas (ou la touche ENTRER touche)

e.key is undefined 
e.which is undefined 
e.type is submit 
e.target is the submit button 

(c'est un événement synthétique)

const React = require('react') 
import { Form, FormControl, FormGroup, ControlLabel, Col, Button, Tooltip, OverlayTrigger } from 'react-bootstrap' 

const Configuration = ({ ServerPort, UserID, PortNumber, WWWUrl, SourcePath, FMEPath }) => { 
    const buttonAction = (e) => { 
     e.preventDefault(); 
     alert(e.target.innerHTML) 
    } 
    return (
     <Form horizontal> 
      <FormGroup controlId="serverPortBox"> 
       <Col componentClass={ControlLabel} sm={2}>Watson Port:</Col> 
       <Col sm={10}> 
        <OverlayTrigger placement="left" overlay={(<Tooltip id="tt1">TCP port for Watson to use</Tooltip>)}> 
         <FormControl type="number" min="1024" max="65535" placeholder={ServerPort} /> 
        </OverlayTrigger> 
       </Col> 
      </FormGroup> 
      <FormGroup controlId="dbPortBox"> 
       <Col componentClass={ControlLabel} sm={2}>Database Port:</Col> 
       <Col sm={10}> 
        <OverlayTrigger placement="left" overlay={(<Tooltip id="tt3">TCP port for PostGreSql DB</Tooltip>)}> 
         <FormControl type="number" min="1024" max="65535" placeholder={PortNumber} /> 
        </OverlayTrigger> 
       </Col> 
      </FormGroup> 
      <Button type="submit" bsStyle="primary" block onClick={(e) => buttonAction(e)}>Update Configuration</Button> 
     </Form> 
    ) 
} 

export default Configuration 

Answer 1

devrait peut-être insérer le bouton avec le type "bouton" au lieu "soumettre"? puis gérer simplement onClick pour ce bouton?

Answer 2

La solution la plus simple serait d'utiliser simplement type="button" au lieu de type="submit".