如何禁用<ENTER>表單提交的關鍵在react-bootstrap

在下面的代碼片段中，我有許多類型爲text的輸入表單。如果用戶點擊，看起來我正在獲得與按下提交按鈕相同的合成事件。我想忽略作爲表單提交，並且只允許按下SUBMIT按鈕。（我刪除了一些表單組來減少這個例子）。如何禁用<ENTER>表單提交的關鍵在react-bootstrap

在所有情況下（按鈕或回車鍵）

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

（這是一個合成的事件）

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

來源

2017-05-03 Dr.YSG

也許應該插入類型爲的按鈕「button」而不是「submit」？然後只需處理onClick這個按鈕？

來源

2017-05-03 18:55:47

這個作品，但我希望能使用redux-forms（http://redux-form.com/6.6.3/），我認爲他們需要一種「提交「 –

我認爲你可以使用按鈕類型。例如在文檔中：http://redux-form.com/6.6.3/examples/simple/我看到按鈕類型按鈕進行重置。但我認爲你可以嘗試提交按鈕 –

如果你遇到這個問題，我發現這個問題在github上是非常有用的，提供了更多的見解：https：//github.com/erikras/redux-form/issues/ 572＃issuecomment-268905929 –

的最簡單的解決辦法是隻使用type="button"代替type="submit"。

來源

2017-05-03 18:54:10 nem035

這是有效的，但我希望能使用redux-forms（http://redux-form.com/6.6.3/），我認爲他們需要一種「提交」 –

我對此並不熟悉圖書館，這可能是另一個問題的話題。在我看來，圖書館不應該強制執行'type =「submit」'這樣的東西，特別是因爲'type =「submit」'的默認行爲通常對現代網站來說不是很好的UX。 – nem035

我同意你關於類型提交和現代網站 –

如何禁用<ENTER>表單提交的關鍵在react-bootstrap

回答

相關問題