为什么反应 onClick 事件会在我的网址上附加一个问号? [英] Why does a react onClick event append a question mark to my url?
问题描述
出于某种原因，当我单击它们时，我的 onClick 处理程序会向我的 url 添加一个空的查询参数.我能够通过将 event.preventDefault 添加到我的事件处理程序来解决这个问题，但我想更好地了解实际发生的情况以及这是否是正确的解决方案.对于上下文，下面的代码是一个简单的组件，用于测试一些 OAuth 2 功能.onClick 处理程序只是触发回流操作.您会看到我已将 e.preventDefault() 添加到所有这些中.如果没有这个修复，只要我触发这些函数之一，我的 url 就会从 http://localhost:3000/#/signIn 改变 到 http://localhost:3000/?#/signIn.我也在使用 react-router.
For some reason my onClick handlers are adding an empty query param to my url when I click them. I was able to fix the issue by adding event.preventDefault to my event handlers but I would like to better understand what actually happened and if this was the correct solution. For context the code below is a simple component to test out some OAuth 2 functionality. The onClick handlers just trigger a reflux action. You'll see I've added e.preventDefault() to all of them. Without that fix, anytime I trigger one of those functions my url will change from http://localhost:3000/#/signIn to http://localhost:3000/?#/signIn . I am also using react-router.
// dependencies -------------------------------------------------------
import React from 'react';
import hello from '../../libs/hello';
import Actions from '../../actions/Actions';
import UserStore from '../../stores/userStore';
var Signin = React.createClass({
// life cycle events --------------------------------------------------
componentDidMount: function () {
},
render: function () {
return (
<form>
<h2>Sign in with Google</h2>
<button className="btn btn-primary" onClick={this._signIn} >
<i className="fa fa-google" />
<span> Google</span>
</button>
<button className="btn btn-info" onClick={this._logToken} >Log Token</button>
<button className="btn btn-warning" onClick={this._signOut}>Sign Out</button>
</form>
);
},
// custom methods -----------------------------------------------------
_signIn: function (e) {
e.preventDefault();
Actions.signIn();
},
_signOut: function (e) {
e.preventDefault();
Actions.signOut();
},
_logToken: function (e) {
// e.preventDefault();
Actions.logToken();
}
});
export default Signin;
推荐答案
button 标签的默认类型是 submit 这意味着点击 buttoncode> 将提交您的表单(将 ? 附加到您的网址).
The default type of a button tag is submit which means clicking the button will submit your form (appending the ? to your url).
要修复您的示例，您可以将 type="button" 添加到您的按钮 &/或将您的 <form> 替换为 <div>/(因为您的代码似乎并不真正需要 form 元素).
To fix your example, you can add type="button" to your buttons &/or replace your <form> with a <div>/<span> (since your code doesn't really seem to need the form element).
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
可能的值是:
- submit:按钮向服务器提交表单数据.如果未指定属性，或者该属性为
，则这是默认值动态更改为空值或无效值. - reset:该按钮将所有控件重置为其初始值.
- button:按钮没有默认行为.它可以有与元素事件相关联的客户端脚本，它们是事件发生时触发.
这篇关于为什么反应 onClick 事件会在我的网址上附加一个问号?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
