componentDidMount의 요청이 잘못되었습니다.

Question

내가 가지고있는 항목의 목록을 끌고 정렬하려면 Sortable (https://github.com/RubaXa/Sortable)을 사용하고 있습니다. 이것을 componentDidMount에로드하고 실제 정렬 기능이 작동하기를 원합니다. 그러나 그것이 아약스 요청에 도착하면, 나는 400 나쁜 요청을받습니다. 나는 그것이있는 문맥과 관련이 있다고 생각하지만, 나는 그것을 소트했다고 생각했다.

단순히 componentDidMount를 생략하고 목록 항목에 함수를 연결하면 요청이 정상적으로 작동합니다. 이 작업을 중단하는 유일한 원인은 Sortable로드 전에 목록 항목에 클릭이 필요하다는 것입니다.

제안 사항? 감사!

moveItem: function(id){ 
    var el = document.getElementById('list'); 
    var sortable = Sortable.create(el, { 
     onSort: function(evt) { 
     var data = { todo_id: id, old_index: evt.oldIndex , new_index: evt.newIndex } 

     $.ajax({ 
      url: "/todo/api/v1.0/move-task", 
      type: "POST", 
      data: data, 
      context: this, 
      success: function(data, status, xhr) { 
      var updated_todos = this.props.changeTodos(data); 
      }.bind(this) 
     }); 
     }.bind(this) 
    }); 
    } 

내가 ES6는 바벨을 사용하여 + 방향으로 이동하는 것이 좋습니다 :

var ToDoList = React.createClass({ 
    getInitialState: function() { 
    return {} 
    }, 
    componentDidMount: function(){ 
    this.moveItem(); 
    }, 
    moveItem: function(id){ 
    var el = document.getElementById('list'); 
    var sortable = Sortable.create(el, { 
     onSort: function(evt) { 
     var data = { todo_id: id, old_index: evt.oldIndex , new_index: evt.newIndex } 

     $.ajax({ 
      url: "/todo/api/v1.0/move-task", 
      type: "POST", 
      data: data, 
      context: this, 
      success: function(data, status, xhr) { 
      var updated_todos = this.props.changeTodos(data); 
      } 
     }); 
     } 
    }); 
    }, 
    render: function(){ 

    return (<ul id="list"> 
     {this.props.todos.map((todo, index) => (
     <li onMouseDown={this.moveItem.bind(this, todo._id.$oid)} key={todo._id.$oid} data-id={todo._id.$oid} className={"list-item"}> 
      <input checked={todo.complete} onChange={this.completeItem.bind(this, todo._id.$oid)} type="checkbox" /> 
      <div className={"item " + todo.complete }>{todo.item}</div> 
      <div className="move">△▽</div> 
      <div className="delete" onClick={this.deleteItem.bind(this, todo._id.$oid)}>x</div> 
     </li> 
    ))} 
     </ul> 
    ); 
    } 
}); 

Answer 1

상황에 맞는 문제,과 같이, 바인드를 사용하려고합니다. 그런 다음 컨텍스트가 변경되지 않는 화살표 기능을 사용할 수 있습니다 (다른 많은 이점과 함께). 여기에 당신을 시작시키는 튜토리얼이 있습니다 : https://blog.risingstack.com/the-react-way-getting-started-tutorial/