От автора: в этой главе мы рассмотрим, как использовать в React формы.
Простой пример
В следующем примере мы установим элемент ввода формы с value = {this.state.data}. Это позволяет обновлять состояние всякий раз, когда изменяется входное значение. Мы используем событие onChange, которое будет следить за изменениями ввода и соответствующим образом обновлять состояние.
App.jsx
|
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 |
import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { data: 'Initial data...' } this.updateState = this.updateState.bind(this); }; updateState(e) { this.setState({data: e.target.value}); } render() { return ( <div> <input type = "text" value = {this.state.data} onChange = {this.updateState} /> <h4>{this.state.data}</h4> </div> ); } } export default App; |
main.js
|
1 2 3 4 5 |
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App/>, document.getElementById('app')); |
Когда изменится значение входного текста, будет обновлено состояние.
Сложный пример
В следующем примере мы увидим, как использовать формы из дочернего компонента. onChange вызовет обновление состояния, которое будет передано дочернему входному значению и отображено на экране. Аналогичный пример используется в главе «События». Когда нам нужно обновить состояние от дочернего компонента, нам нужно передать функцию, которая будет обрабатывать обновление (updateState) в качестве свойства (updateStateProp).
App.jsx
|
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 |
import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { data: 'Initial data...' } this.updateState = this.updateState.bind(this); }; updateState(e) { this.setState({data: e.target.value}); } render() { return ( <div> <Content myDataProp = {this.state.data} updateStateProp = {this.updateState}></Content> </div> ); } } class Content extends React.Component { render() { return ( <div> <input type = "text" value = {this.props.myDataProp} onChange = {this.props.updateStateProp} /> <h3>{this.props.myDataProp}</h3> </div> ); } } export default App; |
main.js
|
1 2 3 4 5 |
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App/>, document.getElementById('app')); |
Это дает следующих результат.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
