Le bus d'événements peut être utilisé dans React ; React utilise le bus d'événements pour résoudre le transfert d'événements entre les composants. Vous pouvez utiliser une bibliothèque d'événements couramment utilisée pour effectuer les opérations correspondantes. Utilisez npm ou Yarn pour installer les événements. "Événements d'installation npm" et "événements d'ajout de fil".
L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.
React Le problème résolu par le bus d'événements : transfert d'événements entre composants
Dans le développement React, s'il y a transfert d'événements entre composants, comment doit-il être effectué ?
A. Dans Vue, nous pouvons rapidement implémenter un bus d'événements (EventBus) via une instance de Vue pour terminer l'opération
B Dans React, nous pouvons nous appuyer sur une bibliothèque d'événements couramment utilisée pour terminer l'opération correspondante ;
Comment implémenter
Utiliser des événements de bibliothèque tierce pour implémenterAPI commune
Créer un objet EventEmitter : objet eventBusÉmettre un événement : eventBus.emit ("nom de l'événement", liste de paramètres) Écouter les événements : eventBus.addListener("event name", listening function)Supprimer l'événement : eventBus.removeListener("event name", listening function)Vous devez l'installer avant utilisation. Choisissez l'une des deux méthodes suivantes.npm install events yarn add events
import { EventEmitter } from 'events' class QcEventEmitter extends EventEmitter {}; export default new QcEventEmitter();
A. Introduisez QcEventEmitter dans le composant EventTestB Cliquez Dans l'événement, l'événement est envoyé via QcEventEmitter.emit
import React, { Component } from 'react'; import QcEventEmitter from 'common/utils/QcEventEmitter' class EventTest extends Component { render() { return ( <div> <button onClick={e => this.btnCLick()}>测试event事件</button> </div> ); } btnCLick(){ QcEventEmitter.emit('contextClick', 'Lucy', '99') } }
import React, { Component, useContext } from 'react'; import QcEventEmitter from 'common/utils/QcEventEmitter' class Person extends Component { componentDidMount(){ QcEventEmitter.addListener("contextClick", this.headerClick) } componentWillUnmount() { QcEventEmitter.removeListener("contextClick", this.headerClick) } headerClick(name, age) { console.log(name, age); } render() { return ( <div> <h2>这是Person子组件</h2> </div> ); } } export default Person;
import React from 'react'; import ContetTest from './pages/contenxt' import Person from 'pages/contenxt/person' function App() { return ( <div className="App"> <ContetTest /> <Person /> </div> ); } export default App;
tutoriel vidéo javascript, front-end web].
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!