От автора: в этой главе мы рассмотрим, как использовать в React формы.
Простой пример
В следующем примере мы установим элемент ввода формы с value = {this.state.data}. Это позволяет обновлять состояние всякий раз, когда изменяется входное значение. Мы используем событие onChange, которое будет следить за изменениями ввода и соответствующим образом обновлять состояние.
App.jsx
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
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
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
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx'; ReactDOM.render(<App/>, document.getElementById('app'));
Это дает следующих результат.
Источник: https://www.tutorialspoint.com/
Редакция: Команда webformyself.