Ungültige Anforderung von componentDidMount

Question

Ich verwende Sortable (https://github.com/RubaXa/Sortable), um eine Liste von Elementen, die ich habe, ziehen und sortieren zu können. Ich möchte, dass dies auf componentDidMount geladen wird und die tatsächliche Sortierfunktion funktioniert. Wenn es jedoch zur Ajax-Anfrage kommt, bekomme ich eine 400 schlechte Anfrage. Ich denke, es hat etwas mit dem Kontext zu tun, in dem es sich befindet, aber ich dachte, ich sortiere das aus.

Wenn ich ComponentDidMount einfach auslassen und einfach die Funktion an das Listenelement anhängen, funktioniert die Anfrage einwandfrei. Das einzige, was mich davon abhält, dies zu tun, ist, dass das Listenelement einen Klick erfordert, bevor es sortierbar geladen wird.

Irgendwelche Vorschläge? Vielen Dank!

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

Es ist ein Zusammenhang Problem, versuchen Sie binden mit, etwa so:

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) 
    }); 
    } 

Ich empfehle Babel bewegen würde in Richtung ES6 + verwenden. Dann könnten Sie Pfeilfunktionen verwenden, bei denen sich der Kontext nicht ändert (zusätzlich zu vielen anderen Vorteilen). Hier ist ein Tutorial, um loszulegen: https://blog.risingstack.com/the-react-way-getting-started-tutorial/