回车键按回车后页面导航答案

【问题标题】：Page navigates after enter key press on enter回车键按回车后页面导航
【发布时间】：2018-10-26 19:10:49
【问题描述】：

我们遇到了这种奇怪的情况，即页面刷新输入按键，但并非总是如此。我们有一个包含文本输入的模式。当您在其中输入内容并且仍然专注于输入时，按回车键，页面导航，即我们有 url: domain/#/clientInfo 输入键后变为 domain/ input.id=input.value#/clientInfo。我已经记录了 submitMethods 和所有 onClick 方法，但没有一个被调用。我试过添加：

onKeyPress={(e) => e.preventDefault()

在 Input 元素上并停止导航。我的问题是如何进一步调试导致此导航事件的原因？

编辑：

输入元素在表单元素内。没有调用提交方法，我在提交方法中添加了日志，并使用了开发人员控制台选项来保存日志，但没有看到任何日志。但是，如果我通过保存按钮提交表单，则会调用提交方法，并且它不会导航到神秘页面。还有一件事，当您通过回车键导航到其他页面时，最终得到 domain/input.id=input.value，然后第二次尝试相同的步骤，但是您的值enter into input 和之前一样，没有导航。

【问题讨论】：

它在表单元素中吗？这可能是原因
是的，它在表单元素里面。
请用更多代码更新您的问题。很容易猜到您正在使用表单，但没有人应该猜测 =)
如果内部的输入元素处于焦点状态，Enter 通常会提交表单。由于这构成离开当前页面，因此可能不会及时触发日志记录。
我已经编辑了包含更多详细信息的帖子。目前我无法添加代码，因为我不在 PC 上。

标签： javascript reactjs reactstrap

【解决方案1】：

所以我怀疑你的表单元素应该是这样的（以非常基本的方式）

export default class FooForm extends Component {
  constructor(props) {
    super(props);
    this.state = { inputValue = this.props.fooValue };
  }

  handleSubmit = (event) => {
    event.preventDefault();
    this.props.FooAction(event);
  }

  onInputChange = (event) => this.setState(() => ({ inputValue: event.target.value }))
  render() {
    return (
      <form onSubmit={ this.handleSubmit }>
        <input value={ this.state.inputValue } onChange={ this.onInputChange } />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

这样，当您提交表单时，它不会执行任何特定于表单的默认操作，让您只执行您明确告诉它执行的操作

【讨论】：