Material-UI v1.0.0-beta.41中onExited方法失效问题求助

Hey there! Let's break down why your onExited callback isn't firing, and how to fix it:

• First, the core issue: The Material-UI Button component doesn't support the onExited prop out of the box. This callback is exclusive to Material-UI's transition components (like Dialog, Snackbar, Fade, Grow, or any component that handles enter/exit animations). Adding it directly to a Button won't trigger anything because the Button has no logic to emit that event.

Fix Options Based on Your Goal #

1. You want to trigger the callback when a transition component (like a Dialog) exits #

If your Button is used to close a Dialog/Snackbar and you want to run code after that component finishes exiting, attach onExited to the transition component itself, not the Button. Here's an example with a Dialog:

class YourComponent extends React.Component {
  state = {
    dialogOpen: false,
  };

  handleOpen = () => this.setState({ dialogOpen: true });
  handleClose = () => this.setState({ dialogOpen: false });
  fireOnExit = () => alert("Exited");

  render() {
    return (
      <div>
        <Button onClick={this.handleOpen}>Open Dialog</Button>
        <Dialog
          open={this.state.dialogOpen}
          onClose={this.handleClose}
          onExited={this.fireOnExit} {/* Attach onExited here, not the Cancel Button */}
        >
          <DialogTitle>Sample Dialog</DialogTitle>
          <DialogActions>
            <Button onClick={this.handleClose}>Cancel</Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }
}

2. You want the Button itself to have an exit animation and trigger the callback #

If you want the Button to fade/slide out and run fireOnExit once it's gone, wrap the Button in a transition component (like Fade) and attach onExited to that wrapper:

class AnimatedButton extends React.Component {
  state = {
    buttonVisible: true,
  };

  handleClose = () => this.setState({ buttonVisible: false });
  fireOnExit = () => alert("Button exited");

  render() {
    return (
      <Fade in={this.state.buttonVisible} onExited={this.fireOnExit}>
        <Button onClick={this.handleClose}>Cancel</Button>
      </Fade>
    );
  }
}

3. Quick version check note #

You're using v1.0.0-beta.41, which is an older beta release, but the onExited behavior for transition components hasn't changed drastically since then. The key fix is still attaching the prop to the correct component.

Just double-check which component's exit you're trying to listen for, and bind onExited to that transition-enabled component, and you should be good to go!

内容的提问来源于stack exchange，提问作者Tuvia Khusid