Question

说明

我正在构建一个简单的ReactJS网页，可以在其中登录/注册。我已经建立了主页，并在其导航栏中带有登录和注册按钮。我正在使用MaterialUI。 我希望在单击登录按钮时打开登录模式。但是直到现在，我只能通过直接在模式代码内的按钮来打开模式。

我做了什么

我研究了很多关于stackoverflow和网络的方法，并尝试以指定的所有不同方式实现一些方法，例如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

需要考虑的几件事：

在openLoginModal中，console.log除了打印到控制台外不会做任何其他事情。
您可能不需要为此使用引用。签出this！

相反，您可以在Navbar.js中设置类似以下内容的状态：

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

然后您可以使用道具将其传递给Modal，例如：

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

无法在ReactJS中打开Modal

1 个答案: