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}>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'));这将产生以下结果。
儿童活动
当我们需要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}>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'));这将产生以下结果。
