Share
En la parte anterior de esta serie de tutoriales, vio cómo implementar la función de página de perfil para la aplicación React blog. En este tutorial, verás cómo implementar etiquetas para las publicaciones del blog.
Comencemos clonando el código fuente de la última parte de la serie..
https://github.com/royagasthyan/ReactBlog-Profile
Una vez que se haya clonado el directorio, vaya al directorio del proyecto e instale las dependencias necesarias.
cd ReactBlogApp-Profile npm install
Inicie el servidor Node.js y tendrá la aplicación ejecutándose en http: // localhost: 7777 / index.html # /.
Comencemos creando un enlace para que el usuario agregue una etiqueta a la base de datos MongoDB. En el index.html página, añadir una más li Para el Añadir etiqueta página.
Cuando el usuario hace clic en el Añadir etiqueta enlace, debe mostrar el Añadir etiqueta Reaccionar componente. Así que vamos a agregar una ruta para el Añadir etiqueta componente en el home.jsx expediente.
Aquí está la lista completa de rutas:
ReactDOM.render (, document.getElementById ('app'));
Vamos a crear el Añadir etiqueta componente que se procesará cuando el usuario haga clic en el enlace Agregar etiqueta.
Accentsconagua
la clase AddTag extiende React.Component constructor (props) super (props); componentDidMount () document.getElementById ('addHyperLink'). className = ""; document.getElementById ('homeHyperlink'). className = ""; document.getElementById ('profileHyperlink'). className = ""; document.getElementById ('tagHyperlink'). className = "active"; render () return ( )Como se ve en el código anterior, dentro del Añadir etiqueta La clase de componente reactivo que ha renderizado la plantilla HTML básica para la página. Dentro de componentDidMount método que tiene nombre de clase para hacer el Añadir etiqueta hipervínculo activo.
Guarde los cambios anteriores y reinicie el servidor. Inicie sesión en la aplicación y haga clic en el Añadir etiqueta enlace, y podrás ver el Añadir etiqueta página.
Definir una variable de estado para realizar un seguimiento del cambio de etiqueta.
constructor (props) super (props); this.state = tag: ";
Adjunte la variable de estado de la etiqueta al elemento de entrada en el método de procesamiento.
Como se ve en el código anterior, también ha adjuntado un onChange Evento a la entrada para realizar un seguimiento de su cambio de valor. Atar el onChange método handleTagChange dentro del constructor.
constructor (props) super (props); this.handleTagChange = this.handleTagChange.bind (this); this.state = tag: ";
Ahora definamos la handleTagChange metodo dentro del Añadir etiqueta Reaccionar componente.
handleTagChange (e) this.setState (tag: e.target.value)
Cuando el usuario hace clic en el botón Agregar para agregar la etiqueta, debe guardar los datos. Así que vamos a adjuntar un al hacer clic evento al botón de entrada.
Atar el añadir etiqueta Método dentro del constructor del componente React y defina el método para realizar una llamada a la API al punto final del servidor Node.js.
constructor (props) super (props); this.addTag = this.addTag.bind (this); this.handleTagChange = this.handleTagChange.bind (this); this.state = tag: ";
A continuación vamos a definir la añadir etiqueta Método para hacer la llamada a la API /añadir etiqueta punto final.
addTag () axios.post ('/ addtag', tag: this.state.tag) .then (function (response) console.log ('reponse from add tag is', response);) .catch (función (error) console.log (error);); Vamos a crear el punto final de la API Node.js para /añadir etiqueta. Dentro de app.js archivo, crea el /añadir etiqueta ruta, que analizará los datos e insertará los datos en la base de datos MongoDB.
app.post ('/ addtag', function (req, res) var tag = req.body.tag; post.addTag (tag, function (result) res.send (result););)Dentro de /añadir etiqueta punto final, ha realizado una llamada a un método llamado añadir etiqueta desde el post.js expediente. Vamos a crear el añadir etiqueta metodo dentro del post.js expediente. Aquí está cómo se ve:
addTag: function (tagName, callback) MongoClient.connect (url, function (err, db) db.collection ('tag'). insertOne ("name": tagName, function (err, result) assert. igual (err, null); console.log ("Guardó los detalles de la etiqueta."); if (err == null) callback (true) else callback (false));); Como se ve en el código anterior, ha utilizado MongoClient para conectarse a la base de datos MongoDB. Ha insertado los datos de la etiqueta en una colección llamada etiqueta dentro de la base de datos. Una vez que los datos se han insertado sin ningún error, Boolean true pasa a la función de devolución de llamada. Si se encuentra un error, se devuelve un falso booleano a la función de devolución de llamada.
Guarde los cambios anteriores y reinicie el servidor. Inicia sesión en la aplicación y haz clic en Añadir etiqueta enlazar. Ingrese un nombre de etiqueta y haga clic en Añadir botón. Verifique la consola del navegador y debería poder ver el mensaje de éxito registrado en la consola del navegador.
Una vez que haya agregado las etiquetas de la Añadir etiqueta página, las etiquetas deben ser rellenadas en el Añadir publicación página. Empecemos por crear un método llamado getTags dentro de post.js Archivo que se conectaría a la base de datos de MongoDB y recuperaría las etiquetas. Aquí está cómo se ve:
getTag: function (callback) MongoClient.connect (url, function (err, db) db.collection ('tag', function (err, collection) collection.find (). toArray (function (err, list) devolución de llamada (lista);););)Como se ve en el código anterior, ha utilizado MongoClient para conectarse a la base de datos de MongoDB. Una vez que se ha recuperado la colección, se ha convertido a matriz utilizando el toArray Método y luego pasa a la función de devolución de llamada.
A continuación, cree el punto final de la API Node.js que llamará a lo anterior GetTag método en app.js.
app.post ('/ gettag', function (req, res) post.getTag (function (resultado) res.send (resultado););)En el home.jsx archivo dentro de la AddPost componente, crea un método llamado getTags lo que hará que el / gettag API llama y busca la lista de etiquetas.
getTags () var self = this; axios.post ('/ getTag', ) .then (function (response) if (response) self.setState (tags: response.data);) .catch (function (error) console .log ('error is', error);); Una vez que los datos se han recuperado de la API, establezca los datos dentro de la etiquetas variable de estado.
Dentro del metodo de render del ShowPost Reactuar componente, agregue el elemento HTML seleccionado para enlazar el etiquetas variable de estado Aquí es cómo se vería:
Como se ve en el código anterior, ha utilizado el mapa método para mapear el etiquetas variable de estado al elemento de selección.
Dentro de componentDidMount método, hacer una llamada a la getTags Método para cargar etiquetas una vez que el componente ha montado.
componentDidMount () document.getElementById ('addHyperLink'). className = "active"; document.getElementById ('homeHyperlink'). className = ""; document.getElementById ('profileHyperlink'). className = ""; document.getElementById ('tagHyperlink'). className = ""; this.getPostWithId (); this.getTags (); Guarde los cambios anteriores y reinicie el servidor. Una vez que hayas cargado el Añadir publicación página, debe tener las etiquetas cargadas en un elemento HTML seleccionado.
Agreguemos una opción predeterminada en el menú desplegable con valor 0.
Has añadido un onChange evento al elemento HTML seleccionado. Aquí es lo que el handleTagChange evento se ve como:
handleTagChange (e) this.setState (tag: e.target.value)
Una vez que el usuario selecciona la etiqueta, el valor estará disponible en la variable de estado etiqueta.
Incluir la etiqueta variable en el addPost método en el AddPost Reaccionar componente.
addPost () axios.post ('/ addPost', title: this.state.title, subject: this.state.subject, tag: this.state.tag, id: this.props.params.id). luego (función (respuesta) console.log ('la respuesta de agregar mensaje es', respuesta); hashHistory.push ('/')) .catch (function (error) console.log (error);); Cambiar el / addpost Punto final de la API para incluir el etiqueta parámetro.
app.post ('/ addpost', function (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 (título, tema, etiqueta, función (resultado ) res.send (result);); else console.log ('update', title, subject); post.updatePost (id, title, subject, tag, function (result) res.send (result ););) Modificar el addPost método en el post.js archivo para incluir el etiqueta parámetro.
addPost: función (título, tema, etiqueta, devolución de llamada) MongoClient.connect (url, función (err, db) db.collection ('post'). insertOne ("title": title, "subject": subject, "tag": tag, function (err, result) assert.equal (err, null); console.log ("Guardó los detalles de la publicación del blog."); if (err == null) callback (true) else callback (false));); Modificar el getPostWithId método para establecer el menú desplegable cuando se obtiene el detalle de la publicación.
getPostWithId () var id = this.props.params.id; var self = esto; axios.post ('/ getPostWithId', id: id) .then (función (respuesta) 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);); Guarde los cambios anteriores y reinicie el servidor. Inicia sesión y navega a la Añadir publicación página y agregar una publicación con una etiqueta seleccionada. Tendrás la nueva publicación guardada y listada. Haga clic en el botón Editar para editar los detalles de la publicación y la etiqueta.
En este tutorial viste cómo implementar la página Agregar etiqueta. Agregó el campo de etiqueta a la página de agregar publicación junto con los campos de título y asunto.
Espero que hayas disfrutado esta serie de tutoriales. Háganos saber sus opiniones, sugerencias o correcciones en los comentarios a continuación..
El código fuente de este tutorial está disponible en GitHub.
