Свойство React не отображается как параметр запроса

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 имеет свойство /profile/), но не отправить форму на сервер , type атрибут button и a имеют различное значение

кнопку - Атрибут type определяет тип кнопки.

a - Атрибут type указывает тип интернет-носителя (ранее известный как тип 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

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>