Руководство ReactJS Form
View more Tutorials:
В HTML, элементы у Form как <input>, <textarea>, <select> сами управляют своими статусами, их статусы могут поменяться из-за влияния пользователя.
В основном данные у Form будут напрямую отправлены к Server, когда пользователь нажимает на кнопку Submit. Но если вы хотите управлять поведением данных у Form с помощью React, вам нужно создать двустороннюю связь между значениями элементов Form и статусом React.
Ниже является простой пример с элементом <input>, значение данного элемента прикреплено от this.state.fullName (Статус управляемый в Component). Когда кто-то меняет значение у <input>, данное значение должно быть обновлено для this.state.fullName через метод setState().

form-input-example.jsx
class SimpleForm extends React.Component { constructor(props) { super(props); this.state = { fullName: "" }; } handleSubmitForm(event) { alert("Full Name: " + this.state.fullName); event.preventDefault(); } handleChange(event) { var value = event.target.value; this.setState({ fullName: value }); } render() { return ( <form onSubmit={event => this.handleSubmitForm(event)}> <label> Full Name: <input type="text" value={this.state.fullName} onChange={event => this.handleChange(event)} /> </label> <input type="submit" value="Submit" /> <p>{this.state.fullName}</p> </form> ); } } // Render ReactDOM.render(<SimpleForm />, document.getElementById("form1"));
form-input-example.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ReactJS Form</title> <script src="https://unpkg.com/react@16.4.2/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16.4.2/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script> </head> <body> <h3>Form Input:</h3> <div id="form1"></div> <script src="form-input-example.jsx" type="text/babel"></script> </body> </html>

В HTML, отличается от элемента <input>, элемент <textarea> позволяет пользователю вводить содержание текста длиннее и сложнее, содержание текста у <textarea> является его подэлементом (Данный подэлемент является #text Node).
<textarea> Hello there, this is some text in a text area </textarea>
В React, содержание текста <textarea> будет настроено через свойство value вместо #text Node. Таким образом в React способ использования <textarea> ничем не отличается от <input>.
form-textarea-example.jsx
class EssayForm extends React.Component { constructor(props) { super(props); this.state = { content: "" }; } handleSubmitForm(event) { alert("Textarea Content: " + this.state.content); event.preventDefault(); } handleChange(event) { var value = event.target.value; this.setState({ content: value }); } render() { return ( <form onSubmit={event => this.handleSubmitForm(event)}> <label>Content</label> <br /> <textarea cols="45" rows="5" value={this.state.content} onChange={event => this.handleChange(event)} /> <br /> <input type="submit" value="Submit" /> <p>{this.state.content}</p> </form> ); } } // Render ReactDOM.render(<EssayForm />, document.getElementById("form1"));
form-textarea-example.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ReactJS Form textarea</title> <script src="https://unpkg.com/react@16.4.2/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16.4.2/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script> </head> <body> <h3>Form textarea:</h3> <div id="form1"></div> <script src="form-textarea-example.jsx" type="text/babel"></script> </body> </html>

form-select-example.jsx
class FlavorForm extends React.Component { constructor(props) { super(props); this.state = { favoriteFlavor: "coconut" }; } handleSubmitForm(event) { alert("Favorite Flavor: " + this.state.favoriteFlavor); event.preventDefault(); } handleChange(event) { var value = event.target.value; this.setState({ favoriteFlavor: value }); } render() { return ( <form onSubmit={event => this.handleSubmitForm(event)}> <p>Pick your favorite flavor:</p> <select value={this.state.favoriteFlavor} onChange={event => this.handleChange(event)}> <option value="grapefruit">Grapefruit</option> <option value="lime">Lime</option> <option value="coconut">Coconut</option> <option value="mango">Mango</option> </select> <input type="submit" value="Submit" /> </form> ); } } // Render ReactDOM.render(<FlavorForm />, document.getElementById("form1"));
form-select-example.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ReactJS Form select/option</title> <script src="https://unpkg.com/react@16.4.2/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16.4.2/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script> </head> <body> <h3>Form select/option:</h3> <div id="form1"></div> <script src="form-select-example.jsx" type="text/babel"></script> </body> </html>