Как обновить DOM после того, как на топор ios вернут React JS и Laravel - PullRequest
Новая
       18

Как обновить DOM после того, как на топор ios вернут React JS и Laravel

0 голосов
/ 29 февраля 2020

Я хочу обновить всю панель инструментов, когда выберите дату как прикрепленное изображение enter image description here

После выбора даты вся информация на странице будет обновлена. Я использую React JS и ax ios, чтобы выбрать дату и Laravel, чтобы обработать результат и вернуть все массивы. Но я не уверен, как встроить возвращаемые результаты в представление (Blade).

Блейд панели приборов: 

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

1 Ответ

0 голосов
/ 29 февраля 2020

При использовании React эмпирическим правилом не является манипулирование DOM самостоятельно. Вам нужно использовать состояния, и, например, когда вы получили данные с помощью ax ios, вы обновите состояние, после чего будет запущен процесс повторного рендеринга; Ваш DOM будет обновлен в соответствии с новым состоянием.

Теперь понятно, что возвращает бэкэнд (Laravel), но если это необработанный код HTML, использовать его с React нецелесообразно. Вместо этого более практично, чтобы ваш бэкэнд отвечал некоторыми JSON данными, которые вы обновляете в соответствии с ним.

...