События ReactJS

В этой главе мы узнаем, как использовать события.

Пример

Это простой пример, где мы будем использовать только один компонент. Мы просто добавилиonClickсобытиеupdateStateКак только нажмут на кнопку, событие вызовет функцию.

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() {
　　　　　　this.setState({data: 'Data updated...'})
　　　}
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<button onClick={this.updateState}>Нажми</button>
　　　　　　　　　　　　<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'));

Это приведет к следующим результатам.

деятельность детей

когда нам нужноstateКогда обновляется родительский компонент из подкласса, в родительском компоненте можно создать обработчик событий (updateState），и как prop (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() {
　　　　　　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}>Нажми</button>
　　　　　　　　　　　　<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'));

Это приведет к следующим результатам.