ReactJS react-grid-layout切换静态属性 [英] ReactJS react-grid-layout toggle static property

问题描述

我已经学习React几天了，这次我试图创建一个可拖动小部件的网格，并且我在github上找到了这个库:

I've been learning React for a couple of days, this time I'm trying to create a grid of draggable widgets, and I found this library on github: react-grid-layout which does that.

这一次，我试图在单击按钮时切换可拖动属性或 static 属性，但是这样做有些麻烦.

This time, I'm trying to toggle draggable or static property when clicking on a button but I'm having some troubles doing so.

这是我的 App.js :

import React, { Component } from 'react';
import {InputText} from 'primereact/components/inputtext/InputText';
import GridLayout from 'react-grid-layout';
import './App.css';

class App extends Component {
    render() {
        var layout = [
            {i: 'a', x: 0, y: 0, w: 10, h: 4},
            {i: 'b', x: 1, y: 0, w: 3, h: 2},
            {i: 'c', x: 4, y: 0, w: 1, h: 2}
        ];
        return (
            <React.Fragment>
                <button onClick={this.toggleStatic (layout)}>Enable</button>
                <GridLayout className="layout" layout={layout} cols={30} rowHeight={30} width={1200} onDragStop={this.onDragStop}>
                    <div key="a">a</div>
                    <div key="b">b</div>
                    <div key="c">c</div>
                </GridLayout>
            </React.Fragment>
        );
    }

    toggleStatic(layout) {
        console.log('Layout', layout);
    }

    onDragStop(layout) {
        layout[0].static = true;
        console.log(layout);
    }
}

export default App;

我的 index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
import 'primereact/resources/themes/omega/theme.css';
import 'primereact/resources/primereact.min.css';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

还有我的 index.css :

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.react-grid-item:not(.react-grid-placeholder) {
    background-color: #ccc;
    border: 1px solid black;
}

.layout {
    background-color: #333;
}

.title {
    font-weight: bold;
}

如果我检查控制台，则在重新加载页面后，在单击之前，我先将 layout 登录到其中.

If I check my console, right after reloading the page I get my layout logged into it, before any click:

Layout […]
​0: Object { i: "a", x: 0, y: 0, … }
1: Object { i: "b", x: 1, y: 0, … }    ​
2: Object { i: "c", x: 4, y: 0, … }    ​
length: 3
__proto__: Array []

但是如果我将 button 更改为:

<button onClick={this.toggleStatic}>Enable</button>

即从中删除参数 layout ，我在控制台中得到以下输出:

i.e. removing the parameter layout from it, I get this output in the console:

Layout Proxy
    <target>: Object { … }
    <handler>: Object { … }

现在，当拖动任何组件时，我的代码将第一个小部件的 static 更改为 true ，我试图在单击按钮时全部更改它

Right now, my code changes static of first widget to true when any component is dragged, I'm trying to change it for all of then on a button click.

我在图书馆的问题上发现了这篇文章:静态地/编程地分配静态，但他们使用的是 react-redux .

I found this post on the library's issues: Assign static dinamically/programatically, but they're using react-redux.

我也发现他们也在使用它:

I found them using this as well:

const mapStateToProps = state => {
  return {
    ...state.dashboard.asMutable()
  };
};

但是我不确定这样做是什么.

But I'm not sure what does that does.

任何建议至少将 layout 变量接收到 toggleStatic 中，对于我来说，这已经足够了.

Any suggestion to at least receive the layout var into the toggleStatic might be enough for me for this matter.

推荐答案

{this.toggleStatic(layout)} 将在 render 而不是 onClick上触发功能，因此您必须进行更改:

{this.toggleStatic (layout)} will trigger the function on render not onClick, so you gotta change:

<button onClick={this.toggleStatic (layout)}>Enable</button>

收件人:

<button onClick={() => this.toggleStatic(layout)}>Enable</button>

然后，当您单击按钮时，将获得布局.

Then when you click on the button you get the layout.

以状态添加布局:

// ...
class App extends Component {
    state = {
         layout: [
            {i: 'a', x: 0, y: 0, w: 10, h: 4},
            {i: 'b', x: 1, y: 0, w: 3, h: 2},
            {i: 'c', x: 4, y: 0, w: 1, h: 2}
         ]
    }
    render() {
        return (
            <React.Fragment>
                <button onClick={() => this.toggleStatic(this.state.layout)}>Enable</button>
                <GridLayout className="layout" layout={this.state.layout} cols={30} rowHeight={30} width={1200} onDragStop={this.onDragStop}>
                    <div key="a">a</div>
                    <div key="b">b</div>
                    <div key="c">c</div>
                </GridLayout>
            </React.Fragment>
        );
    }

// ...

然后在 toggleStatic 函数中执行以下操作:

Then in toggleStatic function do something like:

toggleStatic(layout){
    var newLayout = layout.map(l => {
           return {...l, static: !l.static || true}
    })
    this.setState({
        layout: newLayout
    })
}

这篇关于ReactJS react-grid-layout切换静态属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！