ReactJS - 事件

ReactJS事件 - 从基本概念到高级概念，从简单和简单的步骤学习ReactJS，其中包括概述，环境设置，JSX，组件，状态，道具概述，道具验证，组件API，组件生命周期，表单，事件，参考，键，路由器，磁通概念，使用磁通，动画，服务器端渲染，高阶组件，最佳实践。

在本章中，我们将学习如何使用事件.

简单示例

这是一个简单的例子，我们只使用一个零件.我们只是添加 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 (                     CLICK            {this.state.data}
         
      );   }}export default App;

main.js

import React from 'react';import ReactDOM from 'react-dom';import App from './App.jsx';ReactDOM.render(, document.getElementById('app'));

这将产生以下结果.

React Events Simple

儿童事件

当我们需要更新父母的状态时来自其子组件的组件，我们可以在父组件中创建一个事件处理程序( 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 (                              
      );   }}class Content extends React.Component {   render() {      return (                     CLICK            {this.props.myDataProp}
         
      );   }}export default App;

main.js

import React from 'react';import ReactDOM from 'react-dom';import App from './App.jsx';ReactDOM.render(, document.getElementById('app'));

这将产生以下结果.

React Events Child