Получить результат отправки формы

Question

У меня есть следующий вид:

<form onSubmit={this.gotEmail}> 
    <div className="form-group"> 
    <FormControl type="text" className="form-control"/> 
    </div> 
    <Button className="btn btn-primary btn-large centerButton" type="submit">Send</Button> 
</form> 

Когда представил, я хотел бы получить поле написано пользователем здесь:

<FormControl type="text" className="form-control"/> 

Я пытался получить его, как это :

gotEmail: function(email) { 
    console.log("Email: ", JSON.stringify(email)) 
} 

Однако, я получаю эту ошибку:

EmailForm.jsx:9 Uncaught TypeError: Converting circular structure to JSON 

Когда я пытаюсь напечатать email в консоли я получаю это:

(program):132 Uncaught illegal access 

Как я могу получить пользовательский ввод?

Answer 1

В простом JavaScript вы, вероятно, сделать следующее:

HTML:

<form action="getInput()"> 
<input type="text" id="email" class="form-control/> 
</form> 

JS:

function getInput(){ 
var email = document.getElementById("email").value; 
alert(email); 
} 

Answer 2

Правильный способ доступа к HTML-элемент вашего компонента в React является:

import { findDOMNode } from 'react-dom' 

[...] // all your other script stuff here 

render() { 
    return (
    <form onSubmit={this.gotEmail}> 
     <div className="form-group"> 
     <FormControl ref="email" type="text" className="form-control"/> 
     </div> 
     <Button className="btn btn-primary btn-large centerButton" type="submit">Send</Button> 
    </form> 
) 
} 

gotEmail() { 
    console.log(findDOMNode(this.refs.email).value) 
}