package.json
|
1 2 3 4 5 6 7 8 9 10 |
{ "name": "formsapp", "version": "1.0.0", "scripts": { "start": "lite-server" }, "devDependencies": { "lite-server": "^2.2.1" } } |
Далее, в консоли переходим в директорию проекта при помощи cd и вводим npm install
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<!DOCTYPE html> <html> <head> <meta content="Content-type: text/html" charset="utf-8" /> <title>Формы в React</title> </head> <body> <div id="app"></div> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script> <script type="text/babel" charset="utf-8"> class UserForm extends React.Component { constructor(props) { super(props); this.state = {name: ""}; this.onChange = this.onChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } onChange(e) { var val = e.target.value; this.setState({name: val}); } handleSubmit(e) { e.preventDefault(); alert("Name: " + this.state.name); } render() { return ( <form onSubmit={this.handleSubmit}> <p> <label>Name:</label><br /> <input type="text" value={this.state.name} onChange={this.onChange}/> </p> <input type="submit" value="Send" /> </form> ); } } ReactDOM.render( <UserForm />, document.getElementById("app") ) </script> </body> </html> |
Теперь изменим форму для двух полей name и family
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!DOCTYPE html> <html> <head> <meta content="Content-type: text/html" charset="utf-8" /> <title>‘ормы в React</title> </head> <body> <div id="app"></div> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script> <script type="text/babel" charset="utf-8"> class UserForm extends React.Component { constructor(props) { super(props); this.state = {name: "",family: ""}; this.onChangeName = this.onChangeName.bind(this); this.onChangeFamily = this.onChangeFamily.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } onChangeName(e) { var val = e.target.value; this.setState({name: val}); } onChangeFamily(e) { var val = e.target.value; this.setState({family: val}); } handleSubmit(e) { e.preventDefault(); alert("Name: " + this.state.name+ "\nFamily: " + this.state.family); } render() { return ( <form onSubmit={this.handleSubmit}> <p> <label>Name:</label><br /> <input type="text" value={this.state.name} onChange={this.onChangeName}/> <br></br> <label>Family:</label><br /> <input type="text" value={this.state.family} onChange={this.onChangeFamily}/> </p> <input type="submit" value="Send" /> </form> ); } } ReactDOM.render( <UserForm />, document.getElementById("app") ) </script> </body> </html> |
