От автора: в этой главе мы узнаем, как использовать в React события.
Простой пример
Это простой пример, в котором мы будем использовать только один компонент. Мы просто добавляем событие onClick, которое после нажатия кнопки вызывает функцию updateState.
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 |
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() { this.setState({data: 'Data updated...'}) } render() { return ( <div> <button onClick = {this.updateState}>CLICK</button> <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')); |
Это даст следующий результат.
Дочерние события
Когда нам нужно обновить состояние родительского компонента от его дочернего элемента, мы можем создать обработчик события (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 |
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() { this.setState({data: 'Data updated from the child component...'}) } render() { return ( <div> <Content myDataProp = {this.state.data} updateStateProp = {this.updateState}></Content> </div> ); } } class Content extends React.Component { render() { return ( <div> <button onClick = {this.props.updateStateProp}>CLICK</button> <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.
