Question

当我将它与onlayoutChange方法集成时，我发现使用react-grid-layout（来自https://github.com/STRML/react-grid-layout）很少有复杂性。

每当我添加一个新项目时，我都会将布局和项目添加到现有状态，并使用自定义ID进行布局。（在这种情况下，为了简单起见，我使用的是date.now（）。但根据我的要求，我有一些更复杂的逻辑）

我添加一个新项目，调整大小并将其拖动到一个新位置，触发ResponsiveReactGridLayout的'onLayoutChange'。在观察输入时，我没有看到自定义id属性设置为layout。（添加了我作为输入的截图）

我正在使用onLayoutChange来更新商店。如果我不这样做，当我添加一个新项目时，整个布局将被重置。

下面是我正在使用的代码

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')
)

有人可以帮助我让我知道我在这里失踪了什么吗？在此先感谢。

Answer 1

onLayoutChange has another parameter which helped in resolving my issue.

handleLayoutchange of react-grid-layout

1 个答案: