2017-05-01 3 views
1

Ich habe eine Komponente bekam, dass, wenn vereinfacht sieht aus wie so:Meteor: sortablejs Methode nicht aufgerufen wird

import Sortable from 'react-sortablejs'; 

class App extends Component { 

    constructor(props) { 
    super(props); 
    } 

    updateItemOrder() { 
    let items = this.props.items; 
    items.forEach((item, index) => { 
     console.log(item._id); 
     console.log(index); 

     updateItem.call({ _id: item._id, update: { priority: index } }); 
    }); 
    }; 

    render() { 
    <Sortable 
     tag='ul' 
     className='item-list list-group' 
     onChange={ this.updateItemOrder() }> 
     { this.renderItems() } 
    </Sortable> 
    } 
} 

Meine Konsole listet die item._id und die index auf Seite laden, aber es passiert nichts, wenn ich per Drag & - Drop-Artikel in meiner sortierbaren Liste. Der Wechsel zu einer <ReactSortable> Komponente hilft auch nicht (wie in der docs).

Antwort

1

Von Ihrem obigen Code speziell diese hier Teil, versuchen Requisiten zu mutieren, die

updateItemOrder() { 
    let items = this.props.items; 
    items.forEach((item, index) => { 
     console.log(item._id); 
     console.log(index); 

     updateItem.call({ _id: item._id, update: { priority: index } }); 
    }); 
    }; 

Es scheint, dass Sie nicht in reagieren gehen. Um ein Re-Rendering in react zu verursachen, musst du den Status aktualisieren und sagen, dass dieser Status geändert wird, damit er erneut gerendert werden kann. Dies geschieht mit setState. Es gibt 2 Optionen, die direkt an den Schläger denken. Zuerst können Sie Ihre Requisiten im lokalen Status dieser Komponente erfassen und diese aktualisieren, oder Sie können eine Methode in der übergeordneten Komponente zurückrufen, um ihren Status zu aktualisieren und ihn zum erneuten Rendern zu zwingen.

Verwandte Themen