React属性不显示为查询参数

我有一个小表单，我正在使用它通过URL传递一个值（作为查询参数）。表格如下：React属性不显示为查询参数

<form method="GET"> 
    <input type="hidden" value={`${this.props.age}`} name="p" /> 
    <a href="profile" class="btn btn-primary" type="submit">View</a> 
</form>

想法是从新页面中的URL访问年龄值。喜欢的东西：

http://localhost:8000/?age=13

然而，当我点击链接，没有查询参数出现在URL。有人知道如何解决这个问题吗？提前致谢！！

来源

2016-06-13 user3033194

我认为你应该使用<button>代替<a>，因为当你点击View你去/profile/页面（href具有财产/profile/），但不提交表单服务器。 type属性为button和a具有不同的含义

按钮 - 的type属性指定按钮的类型。

a - type属性指定链接文档的Internet媒体类型（以前称为MIME类型）。

<form method="GET"> 
    <input type="hidden" value={`${this.props.age}`} name="p" /> 
    <button className="btn btn-primary" type="submit">View</button> 
</form>

Example

也可以触发submit方法，防止默认操作<a>

var App = React.createClass({ 
    submit: function (e) { 
    e.preventDefault(); 
    this.refs.form.submit(); 
    }, 

    render: function() { 
    return <form method="GET" ref="form"> 
     <input type="hidden" value={`${this.props.age}`} name="p" /> 
     <a href="profile" class="btn btn-primary" onClick={ this.submit }>View</a> 
    </form>; 
    } 
});

Example

来源

2016-06-13 15:23:23

谢谢你，那有效！ – user3033194

<a>标记不会提交表单，只会重定向到其他网址。

下面应该工作：

<form method="GET" action="profile"> 
    <input type="hidden" value={this.props.age} name="p" /> 
    <button class="btn btn-primary" type="submit">View</button> 
</form>

来源

2016-06-13 15:21:14 omerts

<a>标记只能重定向到一个页面。然后，您可能需要添加一些CSS代码，使按钮看起来像一个<a>标签。

<form method="GET" action="profile"> 
<input type="hidden" value={this.props.age} name="p" /> 
<button class="btn btn-primary" type="submit">View</button> 
</form>

来源

2016-06-13 15:33:57 Cth103

React属性不显示为查询参数

回答

相关问题