如何避免在按回車鍵時以react-bootstrap-validation的形式提交

Question

我在react-bootstrap-validation中使用了表單組件，這裏有很多輸入，複選框和表單中的提交按鈕。

<Form className="detail-model__form" onValidSubmit={this.handleValidSubmit}> 
 
    <button type="button" className="btn btn-danger" onClick={this.deleteSomeValue}>delete</button> 
 
    <button className="btn btn-primary">submit</button> 
 
    <Table className="detail-model__form__table"> 
 
    <thead> 
 
     <tr> 
 
     <th style={{width:120}}>Key</th> 
 
     <th>Value</th> 
 
     <th style={{width:160}}>opperate</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     {this.state.list.map((item, i) => 
 
     <tr key={i}> 
 
      <td> 
 
      <Checkbox checked={item.checked} onChange={() = >{item.checked=!item.checked;this.forceUpdate();}}/> 
 
      </td> 
 
      <td> 
 
      <ValidatedInput 
 
       type="text" 
 
       name={'hash_key_' + i} 
 
       value={item.field} 
 
       validate={(val) => { 
 
        if(val.length) 
 
        return true; 
 
        return "need Key"; 
 
       }} 
 
      /> 
 
      </td> 
 
      <td> 
 
      <span 
 
       className="table-btn" 
 
       onClick={() => { 
 
       this.state.actions.push({ 
 
        "action": "hdel", 
 
        "field": item.field 
 
       }); 
 
       this.state.list.splice(i, 1); 
 
       this.state.length--; 
 
       this.forceUpdate(); 
 
       }} 
 
      >delete</span> 
 
      </td> 
 
     </tr> 
 
    )} 
 
    </tbody> 
 
    </Table> 
 
</Form>

現在我想防止被壓在焦點的輸入或複選框和回車鍵時提交事件。

我在這裏看到的是一些解決方案，可以設置按鈕類型的按鈕，而不是提交，但我需要使用onValidSubmit屬性來驗證數據格式。

我嘗試使用的onkeyup登錄回車鍵被按下，但不是有效的

Answer 1

您還可以使用onKeyDown事件。

將此事件與您的輸入相關聯，然後編寫一個函數，以在鍵入輸入時調用「preventDefault（）」。

class App extends React.Component { 

    constructor(props) { 
    super(props); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleSubmit(event) { 
    alert('Submit'); 
    } 

    handleKeyDown(event) { 
    if (event.keyCode === 13) { 
    event.preventDefault(); 
    } 
    } 

    render() { 
    return (
     <div> 
     <form onSubmit={this.handleSubmit}> 
      <input type="text" onKeyDown={this.handleKeyDown}/> 
      <input type="submit" value="Submit" /> 
     </form> 
     </div> 
    ) 
    } 
} 

在下面的codepen代碼片段中，您可以看到並測試此代碼。

https://codepen.io/alexandremucci/pen/rzpxRy

如果你想阻止所有輸入端輸入，也可以移動「的onkeydown」事件標記形式：

<form onSubmit={this.handleSubmit} onKeyDown={this.handleKeyDown}>