Реагировать - как вызвать всплывающее окно в моем случае? - PullRequest
Новая
       28

Реагировать - как вызвать всплывающее окно в моем случае?

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

Я пока не эксперт по React, поэтому у меня есть к вам вопрос - как вызвать мое всплывающее окно из: 

import {options, columns,convertToArray} from './consts'

    const index = () => {

        const {data, loading, error, performFetch} = fetchHook({path: "/xxx/yyy", fetchOnMount: true})

        return (
            <div className={classes.Container}>
                <h1>List of products</h1>
                <Divider className={classes.Divider} />
                <ProductTable data={convertToArray(data)} options={options} columns={columns}/>
            </div>
        )
    }

    export default index;

consts. js

export const actions = (productPropertyId, showModal) => {
    const productDetails = (productPropertyId) => {
    }

    const removeProduct = (productPropertyId, showModal) => {
    actions(productPropertyId, showModal);

    return (
        <div className={classes.actionsContainer}>
            <Button
                onClick={() => productDetails(productPropertyId)}
            > {"More"}
            </Button>
            <Button
                const removeProduct = (productPropertyId, showModal) => {
    actions(productPropertyId, showModal);
            >{"Remove"}
            </Button>
        </div>
    )
};


export const convertToArray = (productList) => {
    let products = []
    if (productList != null) {
        productList.map(product => {
           column1, column2, column3, actions(product.id)]
            products.push(prod)
        })
    }
    return products;
};

Мое всплывающее окно -> <FormDialog/> на основе материалов реакции.

Можно ли вызвать всплывающее окно в этом месте?

У меня есть таблица материалов реакции с некоторыми столбцами. Последний столбец содержит 2 кнопки, одна из которых - «Удалить» (строка). Здесь я хочу вызвать мое всплывающее окно. Может быть, мне следует перестроить свою структуру?

ОБНОВЛЕНИЕ

Ниже мое всплывающее окно - мне интересно, как запустить это всплывающее окно с места выше: 

const formDialog = (popupOpen) => {
    const [open, setOpen] = React.useState(false);

    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    return (
        <div>
            {/*<Button variant="outlined" color="primary" onClick={handleClickOpen}>*/}
            {/*    Open alert dialog*/}
            {/*</Button>*/}
            <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
                <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
                <DialogContent>
                    <DialogContentText>
                        To subscribe to this website, please enter your email address here. We will send updates
                        occasionally.
                    </DialogContentText>
                    <TextField
                        autoFocus
                        margin="dense"
                        id="name"
                        label="Email Address"
                        type="email"
                        fullWidth
                    />
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose} color="primary">
                        Cancel
                    </Button>
                    <Button onClick={handleClose} color="primary">
                        Subscribe
                    </Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}

export default formDialog;

ОБНОВЛЕНИЕ 2

Я обновил свой код, учитывая советы из вашего ответа, см. Выше. Могу ли я добавить параметр showModal в мой export const actions = (productPropertyId, showModal), а затем вызвать этот компонент с другим значением showModal? К сожалению, мое всплывающее окно не появляется, когда я нажимаю кнопку Удалить: (

1 Ответ

1 голос
/ 22 февраля 2020

Вы можете вызывать его условно и управлять им, используя некоторую переменную состояния. Вот так: 

const [removeModal, removeToggle] = useState(false);
return (<>
<div className={classes.actionsContainer}>
            <Button
                onClick={() => productDetails(productPropertyId)}
            > {"More"}
            </Button>
            <Button
                onClick={() => removeToggle(true)}
            >{"Remove"}
            </Button>
        </div>
{removeModal ? <YourComponent /> : ''}
</>
)

Я использую фрагмент реакции там <></> просто для позиционирования модального div вне основного div, но вы также можете вызывать его внутри вашего основного div (обычно я делаю и установите position: fixed, чтобы модальное / всплывающее окно отображалось поверх всего).

...