在哪裏使用axios post請求在reactJs中插入我的待辦事項？

在哪裏寫axios post請求插入todo到數據庫中。如果我在componentDidUpdate（）中寫入axios post請求，每當點擊todo_completed狀態的複選框時，它將插入到數據庫中。重複記錄保持真假。我不明白的地方來電來郵請求todoApp.jsx 這裏是我的代碼 todoapp.jsx在哪裏使用axios post請求在reactJs中插入我的待辦事項？

var React = require('react'); 
    var TodoSearch = require('TodoSearch'); 
    var AddTodo = require('AddTodo'); 
    var TodoList = require('TodoList'); 
    var axios= require('axios'); 
    var TodoApp=React.createClass({ 
     getInitialState:function(){ 
      return{ 
       todo_completed:false, 
       strSearchText:'', 
       todos:[] 

      }; 
     }, 
     componentDidMount:function(){ 
      var that=this; 
      axios.post('/displaytodo').then(function (response){ 
       console.log("display"); 
       var todos=response.data; 
       console.log(todos); 
       that.setState({ 
        todos:response.data 
       }); 
      }).catch(function (error){ 
       console.log(error); 
      }); 

     }, 
     componentDidUpdate:function(){ 
      var todo_text=""; 
      var todo_completed=""; 
      this.state.todos.forEach(function(todo){ 
       todo_text= todo.todo_text; 
       todo_completed=todo.todo_completed; 
      }); 
//insert todo in database 
      axios.post('/addtodo',{ 
       todo_text:todo_text, 
       todo_completed:todo_completed 

      }).then(function (response) { 

       console.log("data"); 
      }).catch(function (error) { 
       console.log(error); 
      }); 
      }, 
     handleAddTodo:function(todo_text){ 
      alert("new todo "+todo_text); 
        //insert query needed to add todo 
      this.setState({ 
       todos:[ 
       ...this.state.todos, 
       { 
        todo_text:todo_text, 
        todo_completed:false  
       } 
       ] 
      }); 
       }, 
     handleToggle:function(todo_id){ 
      var updatedTodos=this.state.todos.map((todo)=>{ 
       if(todo.todo_id===todo_id){ 
        todo.todo_completed=!todo.todo_completed; 
       } 
       return todo; 
      }); 
      //update query required for completed status 
      this.setState({ 
       todos:updatedTodos 
      }) 
      //alert(id); 
     }, 
     handleSearch:function(boolShowCompleted,strSearchText){ 
      this.setState({ 
       boolShowCompleted:boolShowCompleted, 
       strSearchText:strSearchText.toLowerCase() 

      }); 
     }, 
     render:function(){ 
      var urlValue = this.props.params.sessionValue; 
      console.log(urlValue); 
      var {todos}=this.state; 
      return(
       <div> 
        {urlValue} 
        <TodoSearch onSearch={this.handleSearch}/> 
        <TodoList todos={todos} onToggle={this.handleToggle}/> 
        <AddTodo onAddTodo={this.handleAddTodo}/> 
       </div> 
       ) 
     } 
    }); 
    module.exports=TodoApp;

AddTodo.jsx

var AddTodo = React.createClass({ 
      handleSubmit: function(e) { 
       e.preventDefault(); 
       var strTodoText = this.refs.strTodoText.value; 
       if (strTodoText.length > 0) { 
        this.refs.strTodoText.value = ''; 
        this.props.onAddTodo(strTodoText); 
       } else { 
        this.refs.strTodoText.focus(); 
       } 
      }, 
      render: function() { 

        return (<div> 
           < form onSubmit = { this.handleSubmit } > 

           < input type = "text" ref = "strTodoText"/> 
           < button className = "button" > Add Todo < /button> 
           </form > Add todo..... 
           < /div> 
          ) 
      } 
});

來源

2017-05-08 Sweety

您應該在handleAddTodo方法內而不是componentDidUpdate內使用您的axios請求。 – duwalanise

當我在handleAddTodo中添加axios後rrequest它包含最後添加待辦事項在發佈請求 – Sweety

我還沒有看到您的AddTodo組件。但它應該有一個todo_text和一個按鈕的輸入字段。點擊按鈕，你應該將新輸入的todo_text傳遞給handleAddTodo函數。 – duwalanise

您需要在兩個加一個愛可信post請求

在handleAddTodo函數中，當添加新的待辦事項時會調用該函數。有了這個職位的要求，你需要插入一個新的進入表
在handleToggle功能，當您切換待辦事項的狀態被調用，這個職位的要求，你需要更新已經存在的進入你的表

來源

2017-05-08 12:38:55

當我添加axios postRrequest在handleAddTodo它包含最後添加todo在發佈請求 – Sweety

是的，你應該只添加最後添加的待辦事項在數據庫中是不是 –

是的。 meansif我以前添加asd和next如果我想添加ggg然後在發佈請求中包含asd而不是ggg – Sweety

在哪裏使用axios post請求在reactJs中插入我的待辦事項？

回答

相關問題