为什么反应 onClick 事件会在我的网址上附加一个问号?

问题描述

出于某种原因，当我单击它们时，我的 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 事件会在我的网址上附加一个问号?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！