在本教學(xué)系列的前一部分中，您了解如何實(shí)現(xiàn)新增和顯示貼文功能。在有關(guān)在 React 中建立部落格應(yīng)用程式的教學(xué)系列的這一部分中，您將實(shí)現(xiàn)更新和刪除部落格文章的功能。

開(kāi)始使用

讓我們開(kāi)始複製本系列最後一部分的原始碼。

https://github.com/royagasthyan/ReactBlogApp-AddPost

克隆目錄後，導(dǎo)覽至專(zhuān)案目錄並安裝所需的依賴(lài)項(xiàng)。

cd ReactBlogApp-AddPost
npm install

啟動(dòng) Node.js 伺服器，應(yīng)用程式將在 http://localhost:7777/index.html#/ 上運(yùn)行。

建立更新和刪除視圖

讓我們修改部落格文章列表，以帶有更新和刪除圖示的表格形式顯示資料。在 ShowPost 元件的 render 方法中，將現(xiàn)有的 div 替換為表格，如程式碼所示：

<table className="table table-striped">
            <thead>
              <tr>
                <th>#</th>
                <th>Title</th>
                <th>Subject</th>
                <th></th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {
                this.state.posts.map(function(post,index) {
                   return <tr key={index} >
                            <td>{index+1}</td>
                            <td>{post.title}</td>
                            <td>{post.subject}</td>
                            <td>
                              <span className="glyphicon glyphicon-pencil"></span>
                            </td>
                            <td>
                              <span className="glyphicon glyphicon-remove"></span>
                            </td>
                          </tr>
                }.bind(this))
              }
            </tbody>
</table>

如上面的程式碼所示，您已修改現(xiàn)有程式碼以以表格形式顯示貼文。您已對(duì)應(yīng) posts 變數(shù)以迭代 posts 集合並動(dòng)態(tài)建立所需的 tr 和 td。

儲(chǔ)存以上變更並重新啟動(dòng)伺服器。將瀏覽器指向 http://localhost:7777/home#/，您應(yīng)該可以以表格格式查看部落格文章清單。

實(shí)作更新發(fā)布功能

要實(shí)現(xiàn)更新發(fā)布功能，您需要將點(diǎn)擊事件附加到編輯圖示。修改編輯圖示span如圖：?

<span onClick={this.updatePost.bind(this,post._id)} className="glyphicon glyphicon-pencil"></span>

如上面的程式碼所示，您已將貼文 ID 作為參數(shù)傳遞給 updatePost 方法。

在 ShowPost 元件內(nèi)建立一個(gè)方法 updatePost 。

updatePost(id){
  hashHistory.push('/addPost/' + id);
}

如上面的程式碼所示，您已使用已編輯項(xiàng)目的 ID 觸發(fā)了到新增貼文頁(yè)面的重定向。在新增貼文頁(yè)面中，您將獲得帶有傳遞的 ID 的部落格文章的詳細(xì)資訊並填入詳細(xì)資訊。

修改路由器以在新增貼文頁(yè)面中包含可選的 id 參數(shù)。

<Route component={AddPost} path="/addPost(/:id)"></Route>

在 AddPost 元件內(nèi)，建立一個(gè)名為 getPostWithId 的方法，以使用 id 取得部落格文章的詳細(xì)資訊。在 getPostWithId 方法內(nèi)，對(duì) app.js 內(nèi)的 getPostWithId API 進(jìn)行 AJAX 呼叫。

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});  
    }
  })
  .catch(function (error) {
    console.log('error is ',error);
  });
}

透過(guò)從 getPostWithId API 方法收到的回應(yīng)，您已更新?tīng)顟B(tài)變數(shù) title 和 subject。

修改 title 和 subject 文字方塊以顯示狀態(tài)變數(shù)的值。

<div className="form-group">
    <input value={this.state.title} type="text" onChange={this.handleTitleChange} className="form-control" id="title" name="title" placeholder="Title" required />
</div>
               
<div className="form-group">
    <textarea value={this.state.subject} className="form-control" onChange={this.handleSubjectChange} type="textarea" id="subject" placeholder="Subject" maxlength="140" rows="7"></textarea>
</div>

現(xiàn)在，讓我們?cè)?app.js 中創(chuàng)建 getPostWithId API，以對(duì) MongoDB 資料庫(kù)進(jìn)行資料庫(kù)調(diào)用，以獲取具有特定 ID 的帖子詳細(xì)資訊。這是 getPostWithId API 方法：

app.post('/getPostWithId', function(req,res){
  var id = req.body.id;
  post.getPostWithId(id, function(result){
    res.send(result)
  })
})

在 post.js 檔案中，建立一個(gè)方法 getPostWithId 來(lái)查詢(xún)資料庫(kù)以取得詳細(xì)資訊。其外觀(guān)如下：

getPostWithId: function(id, callback){
	MongoClient.connect(url, function(err, db){
		 db.collection('post').findOne({
		 	_id: new mongodb.ObjectID(id)
		 },
		 function(err, result){
			assert.equal(err, null);
	    	if(err == null){
	    		callback(result)
	    	}
	    	else{
	    		callback(false)
	    	}
		});
	})
}

如上面的程式碼所示，您使用了 findOne API 來(lái)取得具有特定 ID 的部落格文章的詳細(xì)資訊。

儲(chǔ)存以上變更並嘗試執(zhí)行程式。點(diǎn)擊主頁(yè)上的編輯圖標(biāo)，它將重定向到添加帖子頁(yè)面並填充標(biāo)題和主題。

現(xiàn)在，要更新部落格文章詳細(xì)信息，您需要檢查id在app.js 中的addPost API 方法內(nèi)。如果是新帖子，則 id 將為 undefined。

修改 AddPost 元件中的 AddPost 方法以包含 id 狀態(tài)變數(shù)。

axios.post('/addPost', {
    title: this.state.title,
    subject: this.state.subject,
    id: this.state.id
})

在 addPost API 方法中，您需要檢查 id 參數(shù)是否為 undefined 。如果undefined，則表示這是一個(gè)新帖子，否則需要呼叫update方法。 addPost API 方法如下所示：

app.post('/addpost', function (req, res) {
  var title = req.body.title;
  var subject = req.body.subject;
  var id = req.body.id;
  if(id == '' || id == undefined)
    post.addPost(title, subject ,function(result){
      res.send(result);
    }); 
  }
  else{
    post.updatePost(id, title, subject ,function(result){
      res.send(result);
    }); 
  }
})

在 post.js 檔案中，建立一個(gè)名為 updatePost 的方法來(lái)更新部落格文章詳細(xì)資訊。您將利用 updateOne API 來(lái)更新具有特定 id 的部落格文章的詳細(xì)資訊。以下是 updatePost 方法的外觀(guān)：

updatePost: function(id, title, subject, callback){
	MongoClient.connect(url, function(err, db) {
	  	db.collection('post').updateOne( 
	  		{ "_id": new mongodb.ObjectID(id) },
	  		{ $set: 
	  			{ "title" : title,
	  			  "subject" : subject 
	  			}
	  		},function(err, result){
			assert.equal(err, null);
	    	if(err == null){
	    		callback(true)
	    	}
	    	else{
	    		callback(false)
	    	}
		});
	});
}

保存以上更改并重新啟動(dòng)服務(wù)器。登錄應(yīng)用程序并點(diǎn)擊編輯圖標(biāo)。修改現(xiàn)有值并單擊按鈕更新詳細(xì)信息。

實(shí)現(xiàn)刪除帖子功能

要實(shí)現(xiàn)刪除帖子功能，您需要將點(diǎn)擊事件附加到刪除圖標(biāo)。修改刪除圖標(biāo)跨度如圖：

<span onClick={this.deletePost.bind(this,post._id)} className="glyphicon glyphicon-remove"></span>

如上面的代碼所示，您已將帖子 ID 作為參數(shù)傳遞給 deletePost 方法。

在 ShowPost 組件中創(chuàng)建一個(gè)名為 deletePost 的方法。

deletePost(id){
      
}

在ShowPost組件構(gòu)造函數(shù)中綁定該方法。

this.deletePost = this.deletePost.bind(this);

要在 map 函數(shù)回調(diào)中使用 this，您需要將 this 綁定到 map 函數(shù)。修改map函數(shù)回調(diào)如圖：

      {
        this.state.posts.map(function(post,index) {
           return 
                    {index+1}
                    {post.title}
                    {post.subject}
                    
                      <span onClick={this.updatePost.bind(this,post._id)} className="glyphicon glyphicon-pencil"></span>
                    
                    
                      <span onClick={this.deletePost.bind(this,post._id)} className="glyphicon glyphicon-remove"></span>
                    
                  
        }.bind(this))
      }
 

在 deletePost 方法中，在調(diào)用刪除 API 之前添加確認(rèn)提示。

deletePost(id){
  if(confirm('Are you sure ?')){
    // Delete Post API call will be here !!
  }
}

現(xiàn)在讓我們?cè)?app.js 文件中添加 deletePost API。 API 將從 AJAX 調(diào)用中讀取帖子 ID 并從 MongoDB 中刪除該條目。以下是 deletePost API 的外觀(guān)：

app.post('/deletePost', function(req,res){
  var id = req.body.id;
  post.deletePost(id, function(result){
    res.send(result)
  })
})

如上面的代碼所示，您將調(diào)用 post.js 文件中的 deletePost 方法并返回結(jié)果。讓我們?cè)?post.js 文件中創(chuàng)建 deletePost 方法。

deletePost: function(id, callback){

	MongoClient.connect(url, function(err, db){
		 db.collection('post').deleteOne({
		 	_id: new mongodb.ObjectID(id)
		 },
		 function(err, result){
			assert.equal(err, null);
	    	console.log("Deleted the post.");
	    	if(err == null){
	    		callback(true)
	    	}
	    	else{
	    		callback(false)
	    	}
		});
	})
}

如上面的代碼所示，post.js 文件中的 deletePost 方法將使用 MongoClient 連接到MongoDB 中的博客數(shù)據(jù)庫(kù)。使用從 AJAX 調(diào)用傳遞的 Id ，它將從數(shù)據(jù)庫(kù)中刪除該帖子。

更新 home.jsx 文件中 deletePost 方法內(nèi)的代碼，以包含對(duì) deletePost API 的 AJAX 調(diào)用 app.js 文件。

deletePost(id){
  if(confirm('Are you sure ?')){
    var self = this;
    axios.post('/deletePost', {
      id: id
    })
    .then(function (response) {
      
    })
    .catch(function (error) {
      
    });
  }
}

刪除博客文章后，您需要刷新博客文章列表以反映這一點(diǎn)。因此，創(chuàng)建一個(gè)名為 getPost 的新方法，并將 componentDidMount 代碼移到該函數(shù)內(nèi)。這是 getPost 方法：

getPost(){
  var self = this;
  axios.post('/getPost', {
  })
  .then(function (response) {
    console.log('res is ',response);
    self.setState({posts:response.data})
  })
  .catch(function (error) {
    console.log('error is ',error);
  });
}

修改componentDidMount代碼，如圖：

componentDidMount(){
  this.getPost();

  document.getElementById('homeHyperlink').className = "active";
  document.getElementById('addHyperLink').className = "";
}

在 deletePost AJAX 調(diào)用成功回調(diào)內(nèi)，調(diào)用 getPost 方法來(lái)更新博客文章列表。

deletePost(id){
  if(confirm('Are you sure ?')){
    var self = this;
    axios.post('/deletePost', {
      id: id
    })
    .then(function (response) {
      self.getPost();
    })
    .catch(function (error) {
      console.log('Error is ',error);
    });
  }
}

保存以上更改并重新啟動(dòng)服務(wù)器。嘗試添加新的博客文章，然后從網(wǎng)格列表中單擊“刪除”。系統(tǒng)將提示您一條刪除確認(rèn)消息。單擊確定按鈕后，該條目將被刪除，并且博客文章列表將被更新。

總結(jié)

在本教程中，您了解了如何在 React 博客應(yīng)用程序中實(shí)現(xiàn)刪除和更新博客文章功能。在本教程系列的下一部分中，您將了解如何為登錄用戶(hù)實(shí)現(xiàn)個(gè)人資料頁(yè)面。

請(qǐng)?jiān)谙旅娴脑u(píng)論中告訴我們您的想法和建議。本教程的源代碼可在 GitHub 上獲取。

以上是在基於 React 的部落格應(yīng)用程式中更新和刪除帖子：第 4 部分的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！