Question

我想添加拖放功能以对使用React构建的列表进行排序，并将排序所做的更改保留在Meteor应用程序中的mongodb中。

我看了几个库（React Dnd和Sortable-hoc），但我无法超越这些例子。

我的收藏：recipes，关键：stepByStep是一个对象数组。每个对象都有一个stepDescription（这是一个字符串）。

容器：StepEditor订阅recipes并按照stepByStep数组中对象的顺序呈现步骤列表。我想要帮助的是拖放任何步骤并在数据库中按顺序保留更改。可能以一种非常用户友好的方式。

容器看起来像这样：

class StepsEditor extends Component {

    // Renders the list
    renderRecipeSteps( ) {

    return this.props.recipe.stepByStep.map(( step, index ) => {
        return (
            <div key={index}>
                <div>
                    <h4>{index + 1}</h4>
                </div>
                <div>
                    <textarea defaultValue={step.stepDescription}
                              onChange={( event ) => {
                   Meteor.call( 'recipeStep.update', this.props.recipe, index,                      event.target.value );
                    }}/>
                </div>
            </div>
        );
    });

   }


    render( ) {
      return (
            <div>
                {this.renderRecipeSteps( )}
            </div>
           );
    }

}



// Create container, subscribe to `recipes`
export default createContainer( ( props ) => {
   Meteor.subscribe( 'recipes' );

   const { recipeId } = props.params;

   return ({recipe: Recipes.findOne( recipeId )});
}, StepEditor );

如何使用React / Meteor添加可排序的拖放列表？

0 个答案: