Eventos do ReactJS

Neste capítulo, vamos aprender a usar eventos.

exemplo simples

Este é um exemplo simples, onde usaremos apenas um componente. Adicionamos apenasonClickeventosupdateStateDepois que o botão for clicado, o evento desencadeia a função.

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 atualizada...'})
　　　}
　　　render()  {
　　　　　　return  (
　　　　　　　　　<div>
　　　　　　　　　　　　<button onClick={this.updateState}>CLIQUE</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'));

Isso produzirá o seguinte resultado.

atividades infantis

quando precisamosstateao atualizar o componente pai a partir de seus filhos, podemos criar um manipulador de eventos no componente pai (updateState），e torná-lo prop（updateStateProppassado para os componentes filhos, aqui podemos chamá-lo.

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'));

Isso produzirá o seguinte resultado.