Question

我有一个小表单，用于通过URL传递值（作为查询参数）。表格如下：

<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中不会显示任何查询参数。有人知道如何解决这个问题吗？在此先感谢!!

Answer 1

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

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

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

button

Example

您也可以触发submit方法，并阻止a

的默认操作

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

Example

Answer 2

<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>

Answer 3

<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>

React属性未显示为查询参数

3 个答案: