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

我的组件中有一个模块，下面的代码我想添加一个帖子路径到我的代码来捕获用户的响应。我设置了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

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

回答

相关问题