Javascript ReactJS react网格布局切换静态属性

我学习React已经有几天了，这次我尝试创建一个可拖动的小部件网格，我在github上找到了这个库：它可以做到这一点

这一次，我试图在单击

按钮时切换draggable或
static
属性，但我在这样做时遇到了一些问题

这是我的
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;

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 […]
​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 onClick={this.toggleStatic}>Enable</button>

现在，我的代码将第一个小部件的
static
更改为
true
当拖动任何组件时，我将尝试更改所有组件，然后单击按钮

我在图书馆的问题上找到了这篇文章：，但他们使用的是
react-redux

我发现他们也在使用这个：

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

但我不知道那是什么意思

对于这个问题，任何建议至少将
layout
var接收到
toggleStatic
中可能就足够了。
{this.toggleStatic（layout）}
将触发
render
上的函数，而不是
onClick
，因此您必须更改：

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

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

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

你是对的，这实际上将
布局发送到我的方法，但我发现它与我要更新的布局不同，因为我的对象根本不受那里所做更改的影响…我得到
第18行：“布局”未定义无未定义
<代码>第18行
是
我的错，应该是
这个.state.layout
，我编辑了anwser。我可以知道
…l
的功能吗？这是我第二次看到它，我想了解更多。更具体地说，3点表示对象中的所有参数，您只需要更改对象
l
的
static
参数，因此您可以使用
…l
保持其余参数不变，并设置
static
新值。
<button onClick={() => this.toggleStatic(layout)}>Enable</button>

// ...
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(layout){
    var newLayout = layout.map(l => {
           return {...l, static: !l.static || true}
    })
    this.setState({
        layout: newLayout
    })
}