React：在 parent 组件中调用 child 函数时出现问题

Question

我在 React 中制作了一个游戏页面。当你赢得一个时，它会显示一个表单对话框（material-UI：https://material-ui.com/components/dialogs/#form-dialogs）。组件的可见性取决于 open 属性，当您按下按钮时，该属性会随着“handleClickOpen”而改变。我想重用代码，所以我制作了一个包含对话框的组件。到目前为止，这是我的代码 (child class):

class Pop_dialog extends Component {
constructor(props) {
    super(props)

    this.state = {
        open: false
    }
}

handleOpen() {
    console.log('A')
    this.setState({ open: true })
}
handleClose() {
    console.log('B')
    this.setState({ open: false })
}

render() {
    return (
        <Dialog open={this.state.open} onClose={this.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={this.handleClose} color="primary">
                    Cancel
                </Button>
                <Button onClick={this.handleClose} color="primary">
                    Subscribe
                </Button>
            </DialogActions>
        </Dialog>
    )
}

我在 parent class:

的一个函数中调用了“handleOpen”

triggerDialog() { this.dialogRef.current.handleOpen(); }

render ()
{
  ...
  <Pop_dialog ref={this.dialogRef}/>
}

当我 win/lost 游戏时调用 triggerDialog 函数，它可以正常打开表单对话框。当我尝试关闭它（使用取消或订阅按钮）时，问题就来了。页面抛出下一个错误：

我找不到它在这里失败的原因，但当它使用“handleOpen”时却找不到。顺便说一句，这是我使用的第四个解决方案。我还尝试使用带有 useContext 引擎盖的功能组件（它根本不起作用），将 'open' 像道具一样传递给 child （我也可以打开对话框但不能关闭它）和在会话变量中打开 'open'，在 parent 组件中定义并在 child 中调用（我无法打开对话框）。

我不知道其中一些想法是否可行，或者我是否需要一个全新的想法。我对任何想法持开放态度，只要它保持 Pop_dialog 可重用。

Answer 1

您似乎没有将 this 绑定到 Pop_dialog 中的处理程序。结果是 this 在回调处理程序中未定义。

在构造函数中绑定：

class Pop_dialog extends Component {
  constructor(props) {
    super(props)

    this.state = {
        open: false
    }
    this.handleOpen = this.handleOpen.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  handleOpen() {
    console.log('A')
    this.setState({ open: true })
  }
  handleClose() {
    console.log('B')
    this.setState({ open: false })
  }
  ...

或者将处理程序转换为箭头函数，以便 class 的 this 自动绑定。

class Pop_dialog extends Component {
  constructor(props) {
    super(props)

    this.state = {
        open: false
    }
  }

  handleOpen = () => {
    console.log('A')
    this.setState({ open: true })
  }
  handleClose = () => {
    console.log('B')
    this.setState({ open: false })
  }
  ...

React：在 parent 组件中调用 child 函数时出现问题

React: problem calling child function in parent component

javascript

ref

reactjs