javascript - 在 React 组件中显示我的模式时出错

问题描述

我正在使用 React 构建一个应用程序，并且我正在尝试实现一个在发生错误后出现的模式。

这是一张带有输入框的简单登录卡，我会发出一个帖子请求来登录或注册新用户。如果我的表单中有任何错误或用户已经存在，我想弹出一个带有如下错误消息的模式。

我不明白为什么它没有显示。错误是好的，背景是可见的。任何帮助表示赞赏。这是我的代码：

这是 JSX 代码：

import { useHttpClient } from '../hooks/http-hook';
const { isLoading, error, sendRequest, clearError } = useHttpClient();

...

    return (
                <React.Fragment>
                    <ErrorModal error={error} onClear={clearError} />
                    <div className="container">
                        {isLoading && <LoadingSpinner asOverlay />}
                        <div className="card card-container">
                            <img id="profile-img" className="profile-img-card" alt="Login Avatar" src={require("../../assets/images/avatar.png")} />
                            <p id="profile-name" className="profile-name-card"></p>
                            <form className="form-signin" onSubmit={loginSubmitHandler}>
                                <span id="reauth-email" className="reauth-email"></span>
                                {!isLoginMode && (
                                    <Input
                                        element="input"
                                        id="username"
                                        type="text"
                                        title="Username"
                                        placeholder="USERNAME"
                                        validators={[VALIDATOR_REQUIRE()]}
                                        errorText="Required."
                                        onInput={inputHandler}
                                    />
                                )}
                                <Input
                                    element="input"
                                    id="email"
                                    type="text"
                                    title="EMAIL"
                                    placeholder="EMAIL"
                                    validators={[VALIDATOR_EMAIL()]}
                                    errorText="Invalid email address."
                                    onInput={inputHandler}
                                />
                                <Input
                                    element="input"
                                    id="password"
                                    type="password"
                                    title="PASSWORD"
                                    placeholder="PASSWORD"
                                    validators={[VALIDATOR_MINLENGTH(5)]}
                                    errorText="Your password must have at least 5 characters."
                                    onInput={inputHandler}
                                />
                                <Button type="submit" disabled={!formState.isValid}>
                                    {isLoginMode ? 'LOGIN' : 'SIGNUP'}
                                </Button>
                            </form>
                            <Button inverse onClick={switchModeHandler}>
                                SWITCH TO {isLoginMode ? 'SIGNUP' : 'LOGIN'}
                            </Button>
                        </div>
                    </div>
                </React.Fragment>
            )

这是我的 Modal.js

import React from 'react';
import ReactDOM from 'react-dom';
import { CSSTransition } from 'react-transition-group';

import Backdrop from './Backdrop';
import './Modal.css';

const ModalOverlay = props => {
  const content = (
    <div className={`modal ${props.className}`} style={props.style}>
      <header className={`modal__header ${props.headerClass}`}>
        <h2>{props.header}</h2>
      </header>
      <form
        onSubmit={
          props.onSubmit ? props.onSubmit : event => event.preventDefault()
        }
      >
        <div className={`modal__content ${props.contentClass}`}>
          {props.children}
        </div>
        <footer className={`modal__footer ${props.footerClass}`}>
          {props.footer}
        </footer>
      </form>
    </div>
  );
  return ReactDOM.createPortal(content, document.getElementById('modal-hook'));
};

const Modal = props => {
  return (
    <React.Fragment>
      {props.show && <Backdrop onClick={props.onCancel} />}
      <CSSTransition
        in={props.show}
        mountOnEnter
        unmountOnExit
        timeout={200}
        classNames="modal"
      >
        <ModalOverlay {...props} />
      </CSSTransition>
    </React.Fragment>
  );
};

export default Modal;

这是我的 ErrorModal.js

import React from 'react';

import Modal from './Modal';
import Button from '../formElements/Button';

const ErrorModal = props => {
  return (
    <Modal
      onCancel={props.onClear}
      header="An Error Occurred!"
      show={!!props.error}
      footer={<Button onClick={props.onClear}>Okay</Button>}
    >
      <p>{props.error}</p>
    </Modal>
  );
};

export default ErrorModal;

标签： javascriptreactjsmodal-dialogfrontendjsx

javascript - 在 React 组件中显示我的模式时出错

问题描述

解决方案

推荐阅读