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绑定到您自己的处理程序：

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

按钮输入类型提交未在React中使用React Router

1 个答案: