Question

我们有这种奇怪的情况，页面刷新进入按键，但并非总是如此。我们有一个包含文本输入的模态。当你在其中输入内容并且仍然关注输入时，按回车键，页面导航，即，我们有url：域/＃/ clientInfo 在输入键后按下它变为，域/ input.id = input.value＃/ ClientInfo客户端即可。我已经记录了submitMethods和所有onClick方法，但都没有调用它们。我试过添加：

onKeyPress = {（e）=＆gt; e.preventDefault（）

输入元素

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

编辑：

输入元素是表单元素内部。我没有调用Submit方法，我已经添加了提交方法的日志，并使用了开发人员控制台选项来保存日志，并没有看到任何日志。但是，如果我通过保存按钮提交表单提交方法被调用，并且它不会导航到神秘页面。还有一件事，当你通过输入按导航到其他页面，然后以 domain / input.id = input.value 结束时，然后第二次尝试相同的步骤，但是你的值输入输入与之前相同，导航不会发生。

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

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

输入密钥后页面导航按下输入

1 个答案: