Share
In het vorige deel van deze tutorialserie zag je hoe je de profielpagina-functie implementeerde voor de React-blogtoepassing. In deze zelfstudie ziet u hoe u tags voor de blogberichten kunt implementeren.
Laten we beginnen door de broncode uit het laatste deel van de serie te klonen.
https://github.com/royagasthyan/ReactBlog-Profile
Nadat de map is gekloond, navigeert u naar de projectdirectory en installeert u de vereiste afhankelijkheden.
cd ReactBlogApp-Profiel npm install
Start de Node.js-server en de toepassing wordt uitgevoerd op http: // localhost: 7777 / index.html # /.
Laten we beginnen met het maken van een link voor de gebruiker om een tag toe te voegen aan de MongoDB-database. In de index.html pagina, voeg er nog een toe li voor de Tag toevoegen pagina.
Wanneer de gebruiker op de knop klikt Tag toevoegen link, zou het moeten weergeven AddTag Reageer component. Dus laten we een route toevoegen voor de Tag toevoegen component in de home.jsx het dossier.
Hier is de volledige routelijst:
ReactDOM.render (, document.getElementById ( 'app'));
Laten we het maken AddTag component die wordt weergegeven wanneer de gebruiker op de koppeling Tag toevoegen klikt.
Accentsconagua
class AddTag breidt React.Component constructor (props) super (rekwisieten); componentDidMount () document.getElementById ('addHyperLink'). className = ""; document.getElementById ('homeHyperlink'). className = ""; document.getElementById ('profileHyperlink'). className = ""; document.getElementById ('tagHyperlink'). className = "active"; render () retourneren ( )Zoals te zien in de bovenstaande code, binnen de AddTag reageer componentklasse die u de standaard HTML-sjabloon voor de pagina hebt gerenderd. Binnen in de componentDidMount methode heb je de klassenaam om het te maken AddTag hyperlink actief.
Sla de bovenstaande wijzigingen op en start de server opnieuw. Log in op de applicatie en klik op de Tag toevoegen link en u kunt de Tag toevoegen pagina.
Definieer een toestandsvariabele om de wijziging van de tag bij te houden.
constructor (rekwisieten) super (rekwisieten); this.state = tag: ";
Bevestig de tagstatusvariabele aan het invoerelement in de weergavemethode.
Zoals te zien is in de bovenstaande code, hebt u ook een onChange event naar de invoer om de waardeverandering bij te houden. Bind de onChange methode handleTagChange in de constructor.
constructor (rekwisieten) super (rekwisieten); this.handleTagChange = this.handleTagChange.bind (this); this.state = tag: ";
Laten we nu de definiëren handleTagChange methode binnen de AddTag Reageer component.
handleTagChange (e) this.setState (tag: e.target.value)
Wanneer de gebruiker op de knop Toevoegen klikt om de tag toe te voegen, moet u de gegevens opslaan. Dus laten we een bij klikken gebeurtenis naar de invoerknop.
Bind de addTag methode binnen de componentencomponent React en definieer de methode om een API-aanroep te doen naar het eindpunt van de Node.js-server.
constructor (rekwisieten) super (rekwisieten); this.addTag = this.addTag.bind (this); this.handleTagChange = this.handleTagChange.bind (this); this.state = tag: ";
Laten we de volgende definiëren addTag methode om de API aanroep te doen naar de / addtag eindpunt.
addTag () axios.post ('/ addtag', tag: this.state.tag) .then (function (response) console.log ('reponse from add tag is', response);) .catch (functie (fout) console.log (error);); Laten we het Node.js API-eindpunt maken voor / addTag. Binnen in de app.js bestand, maak de / addTag route, die de gegevens zal ontleden en de gegevens in de MongoDB-database zal invoegen.
app.post ('/ addtag', functie (req, res) var tag = req.body.tag; post.addTag (tag, function (result) res.send (result););)Binnen in de / addTag eindpunt, hebt u een oproep gedaan naar een methode met de naam addTag van de post.js het dossier. Laten we het maken addTag methode binnen de post.js het dossier. Hier is hoe het eruit ziet:
addTag: function (tagName, callback) MongoClient.connect (url, functie (err, db) db.collection ('tag'). insertOne ("name": tagName, function (err, result) beweren. equal (err, null); console.log ("Saved the tag details."); if (err == null) callback (true) else callback (false));); Zoals te zien is in de bovenstaande code, die je hebt gebruikt MongoClient om verbinding te maken met de MongoDB-database. U hebt de taggegevens ingevoegd in een verzameling met de tag tag in de database. Nadat de gegevens zonder fouten zijn ingevoegd, wordt Boolean true doorgegeven aan de callback-functie. Als een fout wordt aangetroffen, wordt een Boolean-fout geretourneerd naar de callback-functie.
Sla de bovenstaande wijzigingen op en start de server opnieuw. Log in op de app en klik op de Tag toevoegen link. Voer een tagnaam in en klik op de Toevoegen knop. Controleer de browserconsole en u zou het succesbericht in de browserconsole kunnen zien.
Nadat u de tags van de hebt toegevoegd Tag toevoegen pagina, tags moeten worden ingevuld in de Voeg bericht toe pagina. Laten we beginnen met het creëren van een methode genaamd getTags binnen in de post.js bestand dat verbinding zou maken met de MongoDB-database en de tags zou ophalen. Hier is hoe het eruit ziet:
getTag: function (callback) MongoClient.connect (url, functie (err, db) db.collection ('tag', function (err, collection) collection.find (). toArray (function (err, list) callback (lijst);););)Zoals te zien is in de bovenstaande code, hebt u de MongoClient gebruikt om verbinding te maken met de MongoDB-database. Zodra de verzameling is opgehaald, is deze geconverteerd naar array met behulp van de toArray methode en vervolgens doorgegeven aan de callback-functie.
Maak vervolgens het Node.js API-eindpunt dat het bovenstaande zal oproepen gettag methode in app.js.
app.post ('/ gettag', functie (req, res) post.getTag (functie (resultaat) res.send (result););)In de home.jsx bestand in de AddPost component, maak een methode genaamd getTags welke het zal maken / gettag API-aanroep en haal de taglijst op.
getTags () var self = this; axios.post ('/ getTag', ) .then (functie (antwoord) if (reactie) self.setState (tags: response.data);) .catch (function (error) console .log ('error is', error);); Nadat de gegevens zijn opgehaald uit de API, stelt u de gegevens in de labels toestandsvariabele.
Binnen de rendermethode van de showpost Reageer component, voeg het geselecteerde HTML-element toe om het te binden labels toestandsvariabele. Hier is hoe het eruit zou zien:
Zoals te zien in de bovenstaande code, hebt u de kaart methode om de kaart in kaart te brengen labels toestandsvariabele voor het selectie-element.
Binnen in de componentDidMount methode, bel naar de getTags methode om tags te laden zodra het component is gemount.
componentDidMount () document.getElementById ('addHyperLink'). className = "active"; document.getElementById ('homeHyperlink'). className = ""; document.getElementById ('profileHyperlink'). className = ""; document.getElementById ('tagHyperlink'). className = ""; this.getPostWithId (); this.getTags (); Sla de bovenstaande wijzigingen op en start de server opnieuw. Nadat u de. Hebt geladen Voeg bericht toe pagina, moet u de tags hebben geladen in een geselecteerd HTML-element.
Laten we een standaardoptie toevoegen in de vervolgkeuzelijst met waarde 0.
U hebt een onChange gebeurtenis voor het geselecteerde HTML-element. Hier is wat de handleTagChange evenement ziet eruit als:
handleTagChange (e) this.setState (tag: e.target.value)
Nadat de gebruiker de tag heeft geselecteerd, is de waarde beschikbaar in de statusvariabele label.
Omvat de label variabele in de addPost methode in de AddPost Reageer component.
addPost () axios.post ('/ addPost', title: this.state.title, subject: this.state.subject, tag: this.state.tag, id: this.props.params.id). then (function (response) console.log ('antwoord van add post is', response); hashHistory.push ('/')) .catch (function (error) console.log (error);); Verander de / addpost API-eindpunt om het label parameter.
app.post ('/ addpost', functie (req, res) var title = req.body.title; var subject = req.body.subject; var tag = req.body.tag; var id = req.body. id; console.log ('id is', id); if (id == "|| id == undefined) console.log ('add'); post.addPost (titel, onderwerp, tag, functie (resultaat ) res.send (result);); else console.log ('update', titel, onderwerp); post.updatePost (id, titel, onderwerp, tag, functie (resultaat) res.send (resultaat ););) Wijzig de addPost methode in de post.js bestand om de label parameter.
addPost: functie (titel, onderwerp, tag, callback) MongoClient.connect (url, functie (err, db) db.collection ('post'). insertOne ("title": title, "subject": subject, "tag": tag, functie (err, resultaat) assert.equal (err, null); console.log ("De details van de blogpost opgeslagen."); if (err == null) callback (true) else callback (false));); Wijzig de getPostWithId methode om de vervolgkeuzelijst in te stellen wanneer het postdetail wordt opgehaald.
getPostWithId () var id = this.props.params.id; var self = this; axios.post ('/ getPostWithId', id: id) .then (function (response) if (response) self.setState (title: response.data.title); self.setState (subject: response.data.subject); self.setState (tag: response.data.tag)) .catch (function (error) console.log ('error is', error);); Sla de bovenstaande wijzigingen op en start de server opnieuw. Log in en ga naar Voeg bericht toe pagina en voeg een bericht toe met een tag geselecteerd. U zult het nieuwe bericht opgeslagen en vermeld hebben. Klik op de knop Bewerken om de postdetails en tag te bewerken.
In deze zelfstudie zag u hoe u de tag-pagina invoegt. U hebt het tagveld toegevoegd aan de pagina voor het toevoegen van berichten, samen met titel- en onderwerpvelden.
Ik hoop dat je deze instructiereeks leuk vond. Laat ons uw mening, suggesties of eventuele correcties in de opmerkingen hieronder weten.
Broncode van deze tutorial is beschikbaar op GitHub.
