如何使用 material-ui 處理“內部鏈接”單擊對話框（模態）

Question

如果用戶點擊了模態內的鏈接，我該如何關閉模態？ 例如，他們打開一個登錄表單的模式 - 但也有一個忘記密碼的鏈接。 如果他們點擊鏈接，用戶將被帶到頁面 - 但模態保持打開狀態？

鏈接將是 modalcontents 道具的一部分 - 但是 closehandles 在 modalbox 內？

<ModalBox 
  button={{"label": "Log In", "color":"primary"}}
  modalContents={
    <div className="login-form">
      <Grid container spacing={1}>
        <Grid item xs={12} sm={12}>
          <GenericForm 
            initialValues={initialLoginFormValues} 
            fields={fieldsLoginForm}
            buttons={buttonsLoginForm}
            submitHandler={this.loginFormHandler}
          />

          {errorMsg.length > 0 && 
            (
              <div className="error-text">
                {errorMsg}
              </div>
            )
          }

        </Grid>
        <Grid item xs={12} sm={12}>
          <div className="forgot-password-pane">
            <NavLink
              to="/forgotpassword"
              activeClassName="selected">Forgot password?
            </NavLink>
          </div>
        </Grid>
        <Grid item xs={12} sm={12}>
          Don't have an account? Don't worry, you can <NavLink to="/" activeClassName="selected">join here</NavLink>
        </Grid>
      </Grid>
    </div>
  }
/>

模態框

import React, { Component } from 'react';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import Button from '@material-ui/core/Button';


import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';

//import './ModalBox.scss';

class ModalBox extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = { open: false };
    }

    componentDidUpdate(prevProps) {
      // Typical usage (don't forget to compare props):
      if(this.props.open !== prevProps.open) {
        if(this.props.open){
          this.handleOpen();
        }
      }
    }    

    handleOpen = () => {
      this.setState({open: !this.state.open});
    };

    handleClose = () => {
      this.setState({open: false});

      //if there is a handle close callback - invoke it
      if(this.props.handleClose) {
        this.props.handleClose();
      }
    };

    render() {
        return (
          <>
            {this.props.button &&
              (
                <Button 
                  variant="contained" 
                  color={this.props.button.color} 
                  onClick={this.handleOpen}
                >
                  {this.props.button.label}
                </Button>
              )
            }
            <Modal
              aria-labelledby="transition-modal-title"
              aria-describedby="transition-modal-description"
              className={'modalbox'}
              open={this.state.open}
              onClose={this.handleClose}
              closeAfterTransition
              BackdropComponent={Backdrop}
              BackdropProps={{
                timeout: 500,
              }}
            >
              <Fade in={this.state.open}>
                <div className={'modalboxform ' + this.props.classes}>
                  <IconButton className="close-button" onClick={this.handleClose}>
                    <CloseIcon/>
                  </IconButton>
                  {this.props.modalContents}
                </div>
              </Fade>
            </Modal>
          </>
        );
    }
}

export default ModalBox;

Answer 1

我不確定這是否是生產中的最佳方式，但現在您可以通過向NavLink元素添加onClick事件偵聽器來處理此問題，您的代碼：

  <NavLink
     to="/forgotpassword"
     activeClassName="selected">Forgot password?
  </NavLink>

將此更改為以下內容：

  <NavLink
     to="/forgotpassword"
     activeClassName="selected"
     onClick={this.handleClose}
   >
       Forgot password?
  </NavLink>

就像將代碼移動到您定義模態框組件與所有導入和功能的外觀一樣的地方

或者只需遵循以下代碼：

import React, { Component } from 'react';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import Button from '@material-ui/core/Button';


import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';

//import './ModalBox.scss';

class ModalBox extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = { open: false };
    }

    componentDidUpdate(prevProps) {
      // Typical usage (don't forget to compare props):
      if(this.props.open !== prevProps.open) {
        if(this.props.open){
          this.handleOpen();
        }
      }
    }    

    handleOpen = () => {
      this.setState({open: !this.state.open});
    };

    handleClose = () => {
      this.setState({open: false});

      //if there is a handle close callback - invoke it
      if(this.props.handleClose) {
        this.props.handleClose();
      }
    };

    render() {
        return (
          <>
            {this.props.button &&
              (
                <Button 
                  variant="contained" 
                  color={this.props.button.color} 
                  onClick={this.handleOpen}
                >
                  {this.props.button.label}
                </Button>
              )
            }
            <Modal
              aria-labelledby="transition-modal-title"
              aria-describedby="transition-modal-description"
              className={'modalbox'}
              open={this.state.open}
              onClose={this.handleClose}
              closeAfterTransition
              BackdropComponent={Backdrop}
              BackdropProps={{
                timeout: 500,
              }}
            >
              <Fade in={this.state.open}>
                <div className={'modalboxform ' + this.props.classes}>
                  <IconButton className="close-button" onClick= 
                      {this.handleClose}>
                    <CloseIcon/>
                  </IconButton>
                  {this.props.modalContents}
                </div>
              </Fade>
            </Modal>
          </>
        );
    }
}

  class extend home Component{
   render(){
     return(
      <ModalBox 
    button={{"label": "Log In", "color":"primary"}}
     modalContents={
       <div className="login-form">
       <Grid container spacing={1}>
         <Grid item xs={12} sm={12}>
          <GenericForm 
            initialValues={initialLoginFormValues} 
            fields={fieldsLoginForm}
            buttons={buttonsLoginForm}
            submitHandler={this.loginFormHandler}
          />

          {errorMsg.length > 0 && 
            (
              <div className="error-text">
                {errorMsg}
              </div>
            )
          }

        </Grid>
        <Grid item xs={12} sm={12}>
          <div className="forgot-password-pane">
            <NavLink
              to="/forgotpassword"
              activeClassName="selected"
              onClick={this.handleClose}
              >Forgot password?
            </NavLink>
          </div>
        </Grid>
        <Grid item xs={12} sm={12}>
          Don't have an account? Don't worry, you can <NavLink to="/" 
       activeClassName="selected">join here</NavLink>
        </Grid>
      </Grid>
    </div>
  
     />
  )
   }
 }

整個代碼在一個文件中，這是我看到的唯一不使用 redux 或 context api 之類的解決方案