无法在ReactJS中打开Modal

Question

说明

我正在构建一个简单的ReactJS网页，可以登录/注册。我已经构建了主页并且有一个带有登录和注册按钮的导航栏。我正在使用MaterialUI。我希望在单击登录按钮时打开登录模式。但到目前为止，我只能直接从模态代码中的按钮打开模态。

我做了什么

我研究了很多关于stackoverflow和web的内容，并尝试以指定的各种方式实现一些像refs这样的方法。我已经尝试阅读ReactJS文档来理解这些概念。

码：

我有一个单独的文件用于Login Modal和Navbar。目前，我正在将LoginModal组件导出到Navbar文件中。然后将Navbar组件导出到HomePage文件中。

这是导航栏文件的代码（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);

Answer 1

需要考虑的一些事项：

1. 在openLoginModal，console.log除了打印到控制台之外不会做任何其他事情。
2. 您可能不需要为此使用refs。检查this了！

相反，您可以使用以下内容在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>