-1

Попробовал использовать стандартное модальное окно semantic-ui-react, взятое из примера:

import React from 'react'
import { Button, Header, Icon, Modal } from 'semantic-ui-react'

const ModalBasicExample = () => (
    <Modal trigger={<Button>Basic Modal</Button>} basic size='small'>
        <Header icon='archive' content='Archive Old Messages' />
        <Modal.Content>
            <p>
                Your inbox is getting full, would you like us to enable automatic archiving of old messages?
            </p>
        </Modal.Content>
        <Modal.Actions>
            <Button basic color='red' inverted>
                <Icon name='remove' /> No
            </Button>
            <Button color='green' inverted>
                <Icon name='checkmark' /> Yes
            </Button>
        </Modal.Actions>
    </Modal>
)

export default ModalBasicExample

добавил компонент в App:

import React from 'react'
import BookTable from './BookTable'
import {AddBook} from './Add'
import './library.css'
import CommentsModal from './Comments';
import ModalBasicExample from "./Modal";

export default class App extends React.Component {

    state = {
        books: [],
        isLoading: false,
        isShowComments: false,
        comments: []
    };

    componentDidMount() {
        this.fetchBooks();
    }

    fetchBooks = () => {
        this.setState({ isLoading: true });
        fetch('/all')
            .then(response => response.json())
            .then(books => this.setState({isLoading: false, books: books}));
    };

    handleAddBook = (book) => {
        const newBooks = [book, ...this.state.books];
        this.setState({books: newBooks});
    };

    handleDeleteBook = (id) => {
        const isNotId = book => book.id !== id;
        const updatedBooks = this.state.books.filter(isNotId);
        this.setState({books: updatedBooks});
    };

    handleCommentView = (comments) => {
        this.setState({comments, isShowComments: true});
    };

    render() {
        const { books, isLoading, isShowComments, comments } = this.state;

        return (
            <React.Fragment>
                <div id="tablediv">
                    <h1>Library</h1>
                    {
                        isLoading ?
                            <p>Загружаю...</p>
                            : null
                    }
                    {
                        Array.isArray(books) ?
                        <BookTable
                            books={books}
                            onDelete={this.handleDeleteBook}
                            onCommentView={this.handleCommentView}
                        />
                        : null
                    }
                </div>
                <AddBook onAdd={this.handleAddBook}/>
                <ModalBasicExample/>
            </React.Fragment>
        )
    }
}

Появилась кнопка, но она не реагирует на нажатие - модальное окно не выводится:

введите сюда описание изображения

Буду признателен за подсказки.

2
  • постарайтесь вставить код, а не картинки, так как это получается невоспроизводимая проблема 16 фев 2019 в 17:46
  • Добавил код вместо изображений 16 фев 2019 в 17:57

1 ответ 1

0

Проблема лечится добавлением пакета semantic-ui-css и его импортом:

import 'semantic-ui-css/semantic.min.css';

ответ перенесен из англоязычной версии.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.