Невозможно открыть модал в ReactJS - PullRequest
Новая
       7

Невозможно открыть модал в ReactJS

0 голосов
/ 11 сентября 2018

Объяснение

Я создаю простую веб-страницу ReactJS, где можно войти / зарегистрироваться.Я создал домашнюю страницу и на ней есть панель навигации с кнопками входа и регистрации.Я использую MaterialUI. Я хочу, чтобы модальное имя входа открывалось при нажатии на кнопку входа в систему. Но до сих пор я мог открывать модальное окно только с помощью кнопки непосредственно внутри кода модального окна.

То, что я сделал

Я исследовал LOT на стековом потоке и в Интернете и попытался реализовать несколько подходов, таких как ссылки, во всех указанных случаях.Я попытался прочитать документацию ReactJS, чтобы понять концепции.

Код :

У меня есть отдельный файл для модального имени входа и для панели навигации.В настоящее время я экспортирую компонент LoginModal в файл Navbar.Затем экспортируйте компонент Navbar в файл HomePage.

Вот код файла navbar (Navbar.js): 

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import LoginModal from './LoginModal.js';

const styles = {
  root: {
    flexGrow: 1,
  },
  grow: {
    flexGrow: 1,
  },
  navbar: {
    backgroundColor: 'transparent',
    boxShadow: 'none',
    color: '#06ABFB'
  }
};

class Navbar extends React.Component {

    constructor(props) {
        super(props);
        this.loginmodal = React.createRef();
    }

    openLoginModal = () => {
        console.log(this.loginmodal.current);
    };

    render() {
    const { classes } = this.props;
  return (
    <div className={classes.root}>
      <LoginModal ref={this.loginmodal} />
      <AppBar position="static" className={classes.navbar}>
        <Toolbar>
          <Typography variant="title" color="inherit" className={classes.grow}>
            WorkNet
          </Typography>
          <Button color="inherit" onClick={this.openLoginModal}>Login</Button>
          <Button color="inherit">Sign Up</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}
}

Navbar.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Navbar);

и вот код для модального имени входа (LoginModal.js)) 

  import React from 'react';
  import PropTypes from 'prop-types';
  import { withStyles } from '@material-ui/core/styles';
  import AppBar from '@material-ui/core/AppBar';
  import Toolbar from '@material-ui/core/Toolbar';
  import Typography from '@material-ui/core/Typography';
  import Button from '@material-ui/core/Button';
  import LoginModal from './LoginModal.js';

  const styles = {
    root: {
      flexGrow: 1,
    },
    grow: {
      flexGrow: 1,
    },
    navbar: {
      backgroundColor: 'transparent',
      boxShadow: 'none',
      color: '#06ABFB'
    }
  };

  class Navbar extends React.Component {

      constructor(props) {
          super(props);
          this.loginmodal = React.createRef();
      }

      openLoginModal = () => {
          console.log(this.loginmodal.current);
      };

      render() {
      const { classes } = this.props;
    return (
      <div className={classes.root}>
        <LoginModal ref={this.loginmodal} />
        <AppBar position="static" className={classes.navbar}>
          <Toolbar>
            <Typography variant="title" color="inherit" className={classes.grow}>
              WorkNet
            </Typography>
            <Button color="inherit" onClick={this.openLoginModal}>Login</Button>
            <Button color="inherit">Sign Up</Button>
          </Toolbar>
        </AppBar>
      </div>
    );
  }
  }

  Navbar.propTypes = {
    classes: PropTypes.object.isRequired,
  };

  export default withStyles(styles)(Navbar);

1 Ответ

0 голосов
/ 11 сентября 2018

Несколько вещей для рассмотрения:

  1. В openLoginModal, console.log не собирается делать ничего, кроме печати на консоли.
  2. Возможно, вам не нужноиспользовать ссылки для этого.Проверьте this out!

Вместо этого вы можете установить состояние в Navbar.js с помощью чего-то вроде: 

handleModal = () => {
  this.setState({modalIsOpen: !this.state.modalIsOpen});
};

Затем вы можете передать это своемуМодальное использование реквизита с чем-то вроде: 

<LoginModal open={this.state.modalIsOpen} onClose={this.handleModal} />
<Button color="inherit" onClick={this.handleModal}>Login</Button>
...