मैं अपने पूरे डैशबोर्ड को अपडेट करना चाहता हूं जब संलग्न छवि की तरह दिनांक का चयन करेंenter  छवि विवरण यहाँ

तिथि का चयन करने के बाद पूरे पृष्ठ की जानकारी अपडेट की जाएगी। मैं तारीख और Laravel लेने के लिए प्रतिक्रिया जे एस और axios उपयोग कर रहा हूँ परिणाम को संसाधित करने और सभी सरणियों को वापस करने के लिए। लेकिन मुझे यकीन नहीं है कि वापसी परिणामों को दृश्य (ब्लेड) में कैसे एम्बेड किया जाए।

डैशबोर्ड ब्लेड:

<div class="container">
    <div class="row">
        <div class="col-lg-12 mb-4">
            <div class="row">
                <div class="col-lg-4 ml-auto" id='select-date'>
                </div>
            </div>
        </div>
    </div>
    <div id='dashboard-content'>
        .....
    </div>
</div>

तिथि चुनें:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class SelectDate extends Component {

    constructor() {
        super();
        this.state = {
            value: ''
        }
    }

    selectDate(e) {
        let url = window.location.href
        let date = e.target.value
        this.setState({value: date})
        axios.get(url+ '/' +date).then(response => {
            alert(response.data)
            document.getElementById('dashboard_content').innerHTML = response.data
        }).catch(error => {
            alert(error)
        })
    }

    render() {
        return (
            <div>
                <select className="custom-select custom-select-sm" onChange={this.selectDate.bind(this)} value={this.state.value}>
                    <option selected value='7'>Last Week</option>
                    <option value="1">Today</option>
                    <option value="30">Last Month</option>
                </select>
            </div>
        );
    }
}

if (document.getElementById('select-date')) {
    ReactDOM.render(<SelectDate />, document.getElementById('select-date'));
}
0
WahidSherief 29 फरवरी 2020, 10:30

1 उत्तर

प्रतिक्रिया का उपयोग करते समय, अंगूठे का नियम स्वयं डीओएम में हेरफेर नहीं करना है। आपको राज्यों का उपयोग करने की आवश्यकता है, और उदाहरण के लिए, जब आप अक्ष के साथ डेटा प्राप्त करते हैं, तो आप राज्य को अपडेट करेंगे और फिर एक पुन: प्रस्तुत करने की प्रक्रिया शुरू हो जाएगी; आपका DOM नए राज्य के अनुसार अपडेट किया जाएगा।

अब यह स्पष्ट है कि बैकएंड (लारावेल) क्या लौटाता है, लेकिन अगर यह कच्चा HTML कोड है, तो इसे रिएक्ट के साथ उपयोग करना व्यावहारिक नहीं है। इसके बजाय, यह अधिक व्यावहारिक है कि आपका बैकएंड कुछ JSON डेटा के साथ प्रतिक्रिया करेगा कि आप इसके अनुसार अपना UI अपडेट करेंगे।

0
Arman 29 फरवरी 2020, 11:21