ReactJS - Ereignisse
In diesem Kapitel erfahren Sie, wie Sie Ereignisse verwenden.
Einfaches Beispiel
Dies ist ein einfaches Beispiel, in dem nur eine Komponente verwendet wird. Wir fügen nur hinzuonClick Ereignis, das ausgelöst wird updateState Funktion, sobald die Schaltfläche angeklickt wird.
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'));
Dies führt zu folgendem Ergebnis.
Untergeordnete Ereignisse
Wenn wir das aktualisieren müssen state Von der untergeordneten Komponente aus ihrem untergeordneten Element können wir einen Ereignishandler erstellen (updateState) in der übergeordneten Komponente und übergeben Sie es als Requisite (updateStateProp) zu der untergeordneten Komponente, wo wir sie einfach aufrufen können.
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'));
Dies führt zu folgendem Ergebnis.