Question

我创建了一个Snackbar组件。

import React, { Component } from 'react';
import { Snackbar, IconButton } from '@material-ui/core';
import CloseIcon from '@material-ui/icons/Close';

interface AlertProps {
  message: string;
}

interface AlertState {
  open: boolean;
}

export default class Alert extends Component<AlertProps, AlertState> {
  constructor(props: AlertProps) {
    super(props);
    this.state = {
      open: true
    };
    this.handleClose = this.handleClose.bind(this);
  }
  handleClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
    if (reason !== 'clickaway') {
      this.setState({
        open: false
      });
    }
  }
  render() {
    return (
      <Snackbar
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        open={this.state.open}
        autoHideDuration={6000}
        onClose={this.handleClose}
        message={this.props.message}
        action={
          <IconButton
            key="close"
            color="inherit"
            onClick={this.handleClose}
          >
            <CloseIcon />
          </IconButton>
        }
      />
    )
  }
}

然后，当提交表单时遇到错误时，我会以编程方式将其添加到渲染器中。

let alert: ReactNode;
if (this.state.error) {
  alert = <Alert message={this.state.error} />;
}

问题是Snackbar仅在第一次遇到错误时打开。如果用户两次提交相同的表单，则Snackbar不会打开。

我知道是由于this.state.open = false方法设置的onClose，但是如何在再次提交表单之前“重置”此状态？

Answer 1

一种方法是您可以稍微改变自己的方法，并始终显示Alert，即

<Alert message={this.state.error} open={this.state.open} onClose={()=>{this.setState({open:false})}}/>

还将open状态变量从Alert的状态移到其父项。因此，在Alert中始终使用道具的open值。现在，只要在父级中更改open，Alert就会正确地重新呈现。

如何使Snackbar重新打开？

1 个答案: