Главная » Статьи » React JS — события

React JS — события

React JS — события

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

Простой пример

Это простой пример, в котором мы будем использовать только один компонент. Мы просто добавляем событие 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}>CLICK</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'));

Это даст следующий результат.

Дочерние события

Когда нам нужно обновить состояние родительского компонента от его дочернего элемента, мы можем создать обработчик события (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() { 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

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.