如何在 react/css 中隐藏警报

迪克森·纳斯

似乎无法让警报在 2 秒内消失。错误消息道具从状态中提取并正确生成。也欢迎其他实现，不必使用此方法。如果需要更多信息，请告诉我。谢谢！

在 mystyle.module.css 文件中：

#hideMe {
    -moz-animation: cssAnimation 0s ease-in 2s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 2s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 2s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 2s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

在反应文件中：

import hideMe from './mystyle.module.css';
.
.
.
  render() {
    return (
      <div className={s.root}>
        <Row>
          <Col md={12} sm={12} xs={12}>
                {this.props.errorMessage && (
                  <Alert type={hideMe.hideMe} size="sm" color="danger">
                    {this.props.errorMessage}
                  </Alert>
                )}
                {this.props.successMessage && (
                  <Alert id="hideMe" size="sm" color="success">
                    {this.props.successMessage}
                  </Alert>
                )}
            <Widget>
                <FormGroup>
                  <Label for="input-userlogin">User Login</Label>
                  {!this.state.changingLogin ? <Input
                    id="input-userlogin"
                    type="text"
                    placeholder="User Login"
                    value={this.state.userLogin}
                    onChange={this.changeUserLogin}
                  /> : <div><h6>{this.state.userLogin}</h6></div> }
                </FormGroup>
                <div className="d-flex justify-content-end">
                  <ButtonGroup>
                    <Link to="/app/users"><Button color="default">Cancel</Button></Link>
                    {this.props.selectedUser ? 
                      <Button color="danger" onClick={this.doUpdateCreateLogin}>
                        {this.props.isCreated ? 'Updating...' : 'Update'}
                      </Button> :
                      <Button color="danger" type="submit">
                        {this.props.isCreating ? 'Creating...' : 'Create'}
                      </Button>}
                  </ButtonGroup>
                </div>
            </Widget>
          </Col>
        </Row>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    selectedUser: state.users.selectedUser,
    errorMessage: state.users.message,
    isFetching: state.users.isFetching,
  };
}

tgikf

另一种非常简单的实现是使用一个状态来确定组件的可见性，并在useEffect钩子（或componentDidMount类组件的方法）中使用超时更改其值。

const { useState, useEffect } = React;

const Alert = () => {
  const [show, setShow] = useState(true);
  useEffect(() => {
    setTimeout(() => {
      setShow(false);
    }, 3000);
  }, []);

  return show && <div>I will be hidden after 3s</div>;
};
const App = () => {
  return <Alert />;
};

// Render it
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。