按下回车键时如何避免以react-bootstrap-validation的形式提交答案

【问题标题】：How to avoid submitting in the form of react-bootstrap-validation when press the enter key按下回车键时如何避免以react-bootstrap-validation的形式提交
【发布时间】：2017-08-16 11:08:50
【问题描述】：

我在 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记录回车键被按下，但无效

【问题讨论】：

onKeyPress 事件怎么样，并检查key 代码？

标签： reactjs submit bootstrapvalidator

【解决方案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 sn-p 中，您可以查看并测试此代码。

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

如果您想阻止所有输入的输入，您还可以将“onKeyDown”事件移动到标记表单：

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

【讨论】：