📅  最后修改于: 2020-10-20 04:50:05             🧑  作者: Mango
在本章中,我们将学习如何使用事件。
这是一个简单的示例,其中我们将只使用一个组件。我们只是添加了onClick事件,该事件将在单击按钮后触发updateState函数。
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 (
{this.state.data}
);
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render( , document.getElementById('app'));
这将产生以下结果。
当需要从其子级更新父级组件的状态时,我们可以在父级组件中创建事件处理程序( updateState ),并将其作为prop( updateStateProp )传递给子级组件,在这里我们可以调用它。
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 (
{this.props.myDataProp}
);
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render( , document.getElementById('app'));
这将产生以下结果。