ReactJS 事件

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

简单的例子

这是一个简单的示例，其中我们将只使用一个组件。我们只是添加了onClick事件，updateState一旦单击按钮，该事件将触发功能。

App.jsx

importReactfrom'react';classAppextendsReact.Component{constructor(props){super(props);this.state={data:'Initialdata...'}this.updateState=this.updateState.bind(this);};updateState(){this.setState({data:'Dataupdated...'})}render(){return(<div><buttononClick={this.updateState}>CLICK</button><h4>{this.state.data}</h4></div>);}}exportdefaultApp;

main.js

importReactfrom'react';importReactDOMfrom'react-dom';importAppfrom'./App.jsx';ReactDOM.render(<App/>,document.getElementById('app'));

这将产生以下结果。

儿童活动

当我们需要state从其子级中更新父级组件时，可以在父级组件中创建一个事件处理程序（updateState），并将其作为prop（updateStateProp）传递给子级组件，在这里我们可以对其进行调用。

App.jsx

importReactfrom'react';classAppextendsReact.Component{constructor(props){super(props);this.state={data:'Initialdata...'}this.updateState=this.updateState.bind(this);};updateState(){this.setState({data:'Dataupdatedfromthechildcomponent...'})}render(){return(<div><ContentmyDataProp={this.state.data}updateStateProp={this.updateState}></Content></div>);}}classContentextendsReact.Component{render(){return(<div><buttononClick={this.props.updateStateProp}>CLICK</button><h3>{this.props.myDataProp}</h3></div>);}}exportdefaultApp;

main.js

importReactfrom'react';importReactDOMfrom'react-dom';importAppfrom'./App.jsx';ReactDOM.render(<App/>,document.getElementById('app'));

这将产生以下结果。