handleLayoutVeränderung des react-grid-layouts

Question

Ich sehe einige Schwierigkeiten beim Arbeiten mit react-grid-layout (von https://github.com/STRML/react-grid-layout), wenn ich es mit der onlayoutChange Methode integriere.

Immer, wenn ich ein neues Element hinzufüge, füge ich ein Layout und ein Element zum bestehenden Zustand mit angepasster ID für das Layout hinzu. (In diesem Fall verwende ich für die Einfachheit date.now(). Aber ich habe eine komplexere Logik dafür basierend auf meiner Anforderung)

Ich füge ein neues Element hinzu, grabe es und ziehe es an eine neue Position, die auslöst ' onLayoutChange 'von ResponsiveReactGridLayout. Wenn ich die Eingabe dafür beobachte, wird die benutzerdefinierte ID-Eigenschaft nicht als Layout angezeigt. (Hinzugefügt screenshot von, was ich als Eingang erhält)

Ich benutze onLayoutChange, um Geschäft zu aktualisieren. Wenn ich das nicht mache, wenn ich ein neues Element hinzufüge, wird das gesamte Layout zurückgesetzt.

unten ist der Code Ich verwende für dieses

import React, { Component } from 'react' 
import PropTypes from 'prop-types' 
import ReactDOM from 'react-dom' 
import { createStore } from 'redux' 
import { Provider, connect } from 'react-redux' 

import { Responsive, WidthProvider } from 'react-grid-layout'; 
const ResponsiveReactGridLayout = WidthProvider(Responsive); 
import _ from 'lodash'; 


// React component 
class Counter extends Component { 

     onCustomLayoutChange(layout) { 
     debugger 

} 
    render() { 
    const { value, onIncreaseClick } = this.props 
    return (
     <div> 
     <span>{value.length}</span> 
<span>{this.props.layout.length}</span> 



    <ResponsiveReactGridLayout className="layout" layouts={{lg: this.props.layout}} verticalCompact={false} 
         onLayoutChange={(e) => this.onCustomLayoutChange(e)} 
         breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }} 
         cols={{ lg: 12, md: 12, sm: 6, xs: 4, xxs: 2 }} 
         rowHeight={30} 
        > 
         { 
          _.map(value, (item,i) => (
           <div style={{border:'1px solid red', margin:'10px'}} key={i} > 
            {item} 
           </div> 
          )) 
         } 
        </ResponsiveReactGridLayout> 


     <button onClick={onIncreaseClick}>Add item</button> 

     <ul> 
{ 
          _.map(this.props.layout, (item,i) => (
           <li key={i} > 
            {item.i} 
           </li> 
          )) 
         } 
    </ul> 
     </div> 
    ) 
    } 
} 

Counter.propTypes = { 
    value: PropTypes.array, 
    onIncreaseClick: PropTypes.func.isRequired 
} 

// Action 
const increaseAction = { type: 'increase' } 

const onLayoutChangeAction = { type: 'update_layout' } 

// Reducer 
function counter(state = { count: [], layout: [] }, action) { 
    let count = _.cloneDeep(state.count) 
    let layout =_.cloneDeep(state.layout) 
    switch (action.type) { 
    case 'increase': 
    let id = Date.now() 
    count.push('hello '+id) 
    layout.push({ 
       i: `${id}`, 
       x: 0, 
       y: 0, 
       w: 1, 
       h: 1 
      }) 

      return Object.assign({}, state, { count: count, layout: layout }); 
    // return { count: count, layout: layout } 

    case 'update_layout': 

    return state 
    default: 
     return state 
    } 
} 

// Store 
const store = createStore(counter) 

// Map Redux state to component props 
function mapStateToProps(state) { 
    return { 
    value: state.count, 
    layout: state.layout, 
    } 
} 

// Map Redux actions to component props 
function mapDispatchToProps(dispatch) { 
    return { 
    onIncreaseClick:() => dispatch(increaseAction), 

    onLayoutChangeAction:() => dispatch(onLayoutChangeAction) 

    } 
} 

// Connected Component 
const App = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(Counter) 

ReactDOM.render(
    <Provider store={store}> 
    <App /> 
    </Provider>, 
    document.getElementById('root') 
) 

Kann mir jemand in ließ mich wissen, helfen Sie heraus, was ich hier fehlt? Vielen Dank im Voraus.

Answer 1

onLayoutChange has another parameter which helped in resolving my issue.