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事件。

将此事件与您的输入相关联，并编写一个函数来调用＆＃34; preventDefault（）＆＃34;输入时输入。

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

如果你想阻止所有输入的输入，你也可以移动＆＃34; onKeyDown＆＃34;标记形式的事件：

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

按Enter键时如何避免以react-bootstrap-validation的形式提交

1 个答案: