Question

我最近开始了一个React项目，并且遇到了以下问题：

基本上，我试图构建一个对话框，单击该按钮后立即弹出，就像这样：

所以，我有我的对话框组件（我使用Material-UI的对话框）：

import React from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';

export function BuyDialog() {
  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="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">{"Use Google's location service?"}</DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            Let Google help apps determine location. This means sending anonymous location data to
            Google, even when no apps are running.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Disagree
          </Button>
          <Button onClick={handleClose} color="primary" autoFocus>
            Agree
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

我想单击按钮启动它：

<th><button onClick={BuyDialog}>TEST BUTTON</button></th>

我也将其导入了我的主要组件文件中：

import {BuyDialog} from './Components/BuyDialog';

但是，每次我单击按钮时，都会收到典型的无效挂钩调用错误。

Answer 1

那是因为BuyDialog返回一个React组件。您应该像<BuyDialog />一样使用它来呈现BuyDialog函数的内容。

因此，您似乎应该将<button onClick={BuyDialog}>TEST BUTTON</button>替换为<BuyDialog />。

onClick需要一个执行某些功能的函数。

function doSomething() {
  console.log('Hi!')
}

// This function could be used like
<button onClick={doSomething}>My button</button>

Answer 2

我认为您应该尝试一下。这应该起作用。

ngOnInit() {
this.http.get(`${environment.API_URL}/country`).subscribe(res=>{
this.con=res      
})
}

Answer 3

事件处理程序应该是函数，而不是组件

Answer 4

我们在应用程序中使用了对话框组件。事实上，其中有几个，很多都在同一页面上。您实际上是在页面上直接渲染它们的...但是使用设置为false的本地状态属性标记来设置open属性...其他所有内容都正常连接。当您希望显示它时，您可以更改绑定到open属性的属性的状态，以使其为真... bam！有您的对话...

我看看是否可以找到示例并将其发布。

编辑-找到示例：

<Dialog
// checks to ensure the open prop is defined since the Dialog
// component requires it
    open={props.open === undefined ? false : props.open}
    onClose={props.onClose}
    aria-labelledby="alert-dialog-title"
    aria-describedby="alert-dialog-description"
>
  <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
  <DialogContent>{text}</DialogContent>
  {displayActions()}
</Dialog>

我们发现自己经常使用它，因此我们实际上将Dialog组件包装在一起以简化开发。 displayActions需要显示的是确定/取消/是/否/等按钮...

它的命名方式：

<ConfirmDialog
    title="Submit Test"
    text="This will submit the test for action."
    okcancel
    open={showSubmitDialog}
    onCancel={e => setShowSubmitDialog(false)}
    onOk={onSubmitOk}
/>

最后但同样重要的是……状态管理：

const [showSubmitDialog, setShowSubmitDialog] = useState(false);

从其他文件反应导入功能

4 个答案: