我还不是ReactMaven,因此我有一个问题要问你--如何调用我的弹出窗口:
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/>
基于react Materials。
在这个地方可以调用弹出窗口吗?
我有一个React材料表与一些列。最后一列包含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
我更新了我的代码考虑到cosideration的提示从您的回应,见上文。我可以在我的export const actions = (productPropertyId, showModal)
中添加一个参数showModal,然后用不同的showModal值调用这个组件吗?不幸的是,当我点击删除按钮时,我的弹出窗口不会出现:(
1条答案
按热度按时间ne5o7dgx1#
您可以有条件地调用它并使用一些状态变量控制它。像这样:
我在这里使用了一个react片段
<></>
,只是为了将modal div放在main div之外,但是你也可以在main div中调用它(我通常这样做,并设置position: fixed
,这样modal/popup就可以出现在所有内容的顶部)。