如何添加帖子路由到我的反應應用程序

我的組件中有一個模塊，下面的代碼我想添加一個帖子路徑到我的代碼來捕獲用戶的響應。我設置了Mongo/Mongoose以及後端服務器。任何幫助將是驚人的，因爲我是React新手！如何添加帖子路由到我的反應應用程序

render() { 
 
\t \t return(
 
\t \t \t <div className="modal column y-center"> 
 
\t \t \t \t <h3>How are you doing?</h3> 
 
\t \t \t \t {!this.state.start ? (
 
\t \t \t \t \t <div className="choices"> 
 
\t \t \t \t \t \t <button onClick={() => this.startRelaxation('ok_images')}>Ok</button> 
 
\t \t \t \t \t \t <button onClick={() => this.startRelaxation('neutral_images')}>Neutral</button> 
 
\t \t \t \t \t \t <button onClick={() => this.startRelaxation('anxious_images')}>Anxious</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t) : (
 
\t \t \t \t \t <div className="column y-center"> 
 
\t \t \t \t \t \t <div className="image"> 
 
\t \t \t \t \t \t \t <img src={this.state[this.state.mood][this.state.current_image]}/> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <button onClick={this.nextImage.bind(this)}>Next Image</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t)} 
 
\t \t \t \t <button onClick={this.props.closeModal}>Close</button> 
 
\t \t \t </div> 
 
\t \t) 
 
\t } 
 
}

來源

2017-10-20 vfield

'this.startRelaxation'做什麼？這就是你應該通過POST調用來存儲他們的答案的地方。 –

感謝您的回覆，我附上了下面的startRelaxation功能。任何幫助將是美好的。 this.state = { \t \t \t開始：假， \t \t \t current_image：1， \t \t \t心情： ''， \t \t \t ok_images： \t \t \t \t的「https：// picsum .photos/300/300？image = 16'， \t \t \t \t]， \t \t個\t neutral_images： \t \t \t \t 'https://picsum.photos/200/300?image=103'， \t \t \t]， \t \t \t anxious_images： \t \t \t \t的「https：/ /picsum.photos/300/300?image=16' ， \t \t \t \t \t \t \t] \t \t} \t} \t startRelaxation（情緒）{ \t \t this.setState（{ \t \t \t開始：真， \t \t \t情緒：情緒 \t \t}）; \t} – vfield

我會建議鉤住你的startRelaxation()功能使用第三方庫來執行HTTP請求到後端，如Axios。

另外，鑑於您使用的是MongoDB，您可能會發現數據庫管理工具（如Parse Server）非常有用。

來源

2017-10-20 23:21:14

這只是建立關阿爾曼的帖子，但你可以做這樣的事情：

import axios from 'axios'; 
 
import React, {Component} from 'react'; 
 

 
class YouComponent extends Component { 
 
     constructor(props){ 
 
      super(props); 
 
      this.startRelaxation = this.startRelaxation.bind(this); 
 
     } 
 
     startRelaxation(string){ 
 
      axios.post('YourRoute'{'BODY OF REQUEST'}) 
 
      .then(data => 'DO STUFF WITH DATA'); 
 
     } 
 
     render() { 
 
      return(
 
       <div className="modal column y-center"> 
 
        <h3>How are you doing?</h3> 
 
        {!this.state.start ? (
 
         <div className="choices"> 
 
          <button onClick={() => this.startRelaxation('ok_images')}>Ok</button> 
 
          <button onClick={() => this.startRelaxation('neutral_images')}>Neutral</button> 
 
          <button onClick={() => this.startRelaxation('anxious_images')}>Anxious</button> 
 
         </div> 
 
        ) : (
 
         <div className="column y-center"> 
 
          <div className="image"> 
 
           <img src={this.state[this.state.mood][this.state.current_image]}/> 
 
          </div> 
 
          <button onClick={this.nextImage.bind(this)}>Next Image</button> 
 
         </div> 
 
        )} 
 
        <button onClick={this.props.closeModal}>Close</button> 
 
       </div> 
 
      ) 
 
     } 
 
    }

你必須在startRelation方法Axios的請求，你可以做任何你需要在DB中做。

來源

2017-10-21 17:53:05

如何添加帖子路由到我的反應應用程序

回答

相關問題