Material-ui компонент снэк-бара для статуса оповещения?

Question

Привет, я очень новичок в реагировании и материале, я пытаюсь использовать компонент закусочной https://material-ui.com/es/components/snackbars/#customized -snackbars , но я не уверен, что мне нужно создавать отдельные компоненты для каждого типа оповещения. показывается в демке?

Answer 1

Вот пример:

import React, {useState} from "react";
import Button from "@material-ui/core/Button";
import Snackbar from "@material-ui/core/Snackbar";

export default function SnackbarExample() {
    const [state, setState] = useState({
        open: false,
        vertical: 'top',
        horizontal: 'center',
    });

    const {vertical, horizontal, open} = state;

    const handleClick = (newState) => () => {
        setState({open: true, ...newState});
    };

    const handleClose = () => {
        setState({...state, open: false});
    };

    return (
        <div>
            <Button onClick={handleClick({vertical: 'top', horizontal: 'center'})}>Top-Center</Button>
            <Button onClick={handleClick({vertical: 'top', horizontal: 'right'})}>Top-Right</Button>
            <Button onClick={handleClick({vertical: 'bottom', horizontal: 'right'})}>
                Bottom-Right
            </Button>
            <Button onClick={handleClick({vertical: 'bottom', horizontal: 'center'})}>
                Bottom-Center
            </Button>
            <Button onClick={handleClick({vertical: 'bottom', horizontal: 'left'})}>Bottom-Left</Button>
            <Button onClick={handleClick({vertical: 'top', horizontal: 'left'})}>Top-Left</Button>
            <Snackbar
                anchorOrigin={{vertical, horizontal}}
                key={`${vertical},${horizontal}`}
                open={open}
                onClose={handleClose}
                message="I love snacks"
            />
        </div>
    );
}

Источник