回车时如何避免以react-bootstrap-validation的形式提交

Question

我在react-bootstrap-validation中使用了表单组件，表单中有很多input、checkbox和一个提交按钮。

<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>  
    )
  }
}

在下面的代码笔片段中，您可以看到并测试这段代码。

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

如果要阻止所有输入的输入，您还可以将 "onKeyDown" 事件移动到标记形式：

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

回车时如何避免以react-bootstrap-validation的形式提交

How to avoid submitting in the form of react-bootstrap-validation when press the enter key

submit

reactjs

bootstrapvalidator