javascript - 按钮输入类型提交不在 React 中使用 React Router 提交

Question

我在尝试使用的按钮中添加了 NavLink 引用(来自 React Router)的 React.js 上下文原因。无论哪种方式，当我想提交数据时:

submitData(event) {
    event.preventDefault();
    alert("Submitted");
}

这会起作用:

<FormGroup>
  <input type="submit" />
</FormGroup>

但这不会:

<FormGroup>
    <Button type="submit" id="submitButton" color="primary"><NavLink to="/Confirm">Submit</NavLink></Button>
</FormGroup>

不确定为什么第二种方法不起作用，但这是我的首选方法。关于为什么的任何想法或想法？我知道<button>较新，但添加了 type="input"应该迫使它照样工作。

Answer 1

NavLink 组件已经在监听它自己的提交/点击事件，该事件不会传播到您自己的表单的 onSubmit。

简单的解决方案就是将 NavLink 的 onClick 绑定(bind)到您自己的处理程序:

<FormGroup>
    <Button type="submit" id="submitButton" color="primary">
        <NavLink to="/Confirm" onClick={this.submitData.bind(this)}>Submit</NavLink>
    </Button>
</FormGroup>