मैं कुछ दिनों से रिएक्ट सीख रहा हूं, इस बार मैं ड्रैग करने योग्य विजेट्स का ग्रिड बनाने की कोशिश कर रहा हूं, और मुझे यह लाइब्रेरी जीथब पर मिली: react-grid-layout जो ऐसा करता है।

इस बार, मैं button पर क्लिक करते समय ड्रैग करने योग्य या 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;

मेरा 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 लॉग इन करता हूं:

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 को हटाकर, मुझे यह आउटपुट कंसोल में मिलता है:

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

अभी, मेरा कोड पहले विजेट के static को true में बदल देता है, जब कोई घटक खींचा जाता है, तो मैं इसे एक बटन क्लिक पर सभी के लिए बदलने की कोशिश कर रहा हूं।

मुझे यह पोस्ट लाइब्रेरी के मुद्दों पर मिली: स्थैतिक रूप से/प्रोग्रामेटिक रूप से असाइन करें , लेकिन वे react-redux का उपयोग कर रहे हैं।

मैंने उन्हें इसका उपयोग करते हुए भी पाया:

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

लेकिन मुझे यकीन नहीं है कि वह क्या करता है।

कम से कम layout var को toggleStatic में प्राप्त करने का कोई भी सुझाव इस मामले के लिए मेरे लिए पर्याप्त हो सकता है।

1
Frakcool 11 मई 2018, 21:19

1 उत्तर

सबसे बढ़िया उत्तर

{this.toggleStatic (layout)} render पर onClick पर फ़ंक्शन को ट्रिगर करेगा, इसलिए आपको बदलना होगा:

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

प्रति:

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

फिर जब आप बटन पर क्लिक करते हैं तो आपको लेआउट मिलता है।

state में लेआउट जोड़ें:

// ...
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 फ़ंक्शन में कुछ ऐसा करें:

toggleStatic(layout){
    var newLayout = layout.map(l => {
           return {...l, static: !l.static || true}
    })
    this.setState({
        layout: newLayout
    })
}
2
Frakcool 12 मई 2018, 00:34