Не удается создать предупреждение в реакции - PullRequest
0 голосов
/ 10 ноября 2018

Я пытаюсь сделать оповещение в приложении «реагировать» (веб-интерфейс реагирует и серверная часть Java). Предупреждение должно быть видно после успешного удаления. Я нашел это учебное пособие и запускаю эту команду 'npm install --save Reactionstrap Reaction Reaction-Dom' но, к сожалению, я не вижу никаких предупреждений. мой код:

import React from 'react';
import logo from '../images/logo.svg';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
import {Button} from 'react-bootstrap';
import { Alert } from 'reactstrap';

class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            beers: [],
            visible: false
        };

        this.onDismiss = this.onDismiss.bind(this);
    }

    onDismiss() {
        this.setState({ visible: false });
    }

    componentDidMount() {
        this.loadBeersFromServer();
    }

    loadBeersFromServer() {
        fetch('http://localhost:8084/api/good-beers', {
            method: 'GET'
        })
            .then((response) => response.json())
            .then((beers) => {
                this.setState({
                    beers: beers
                });
            });
    };

    deleteItem(row) {
        const id = row.id;
        fetch('http://localhost:8084/api/good-beers/' + id,
            {method: 'GET'}).then(
            () => this.loadBeersFromServer(),
            this.setState({visible: true})
        ).catch(function () {
            console.log("error");
        });
    }

    cellButton(cell, row) {
        return (
            <Button
                type="button" bsStyle="danger"
                onClick={() =>
                    this.deleteItem(row)}>Delete</Button>
        )
    }

    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo"/>
                    <h1 className="App-title">Wellcome to React</h1>
                </header>

                <Alert color="info" isOpen={this.state.visible} toggle={this.onDismiss}>
                    I am an alert and I can be dismissed!
                </Alert>

                <BootstrapTable data={this.state.beers} options={{noDataText: 'Zatím nebyl vložen žádný záznam'}}
                                version='4' striped={true} hover={true}>
                    <TableHeaderColumn dataField='id' isKey={true} dataSort width='20%'>ID</TableHeaderColumn>
                    <TableHeaderColumn dataField='name' dataSort>Pivo</TableHeaderColumn>
                    <TableHeaderColumn dataField='button' dataFormat={this.cellButton.bind(this)} width='10%'/>
                </BootstrapTable>

            </div>
        );
    }
}

export default App;

Не могли бы вы мне помочь? Как решить эту проблему. Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...