我试图在react中实现menuitem，但得到错误信息

问题描述 投票：0回答：2
  • 我在react中使用MenuItem来实现下拉菜单。
  • 我已经导入了这个包，然后我也面临着运行服务器时的错误。
  • 我试图寻找解决方案，但没有得到任何确切的方法来解决这个问题。
  • 或者有任何其他方法来实现相同的？
  • 我想在下拉菜单下有2个选项 "User "和 "Admin"，所以在注册时用户会选择他的角色。
import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { registerUser } from "../../actions/authActions";
import classnames from "classnames";
import MenuItem from '@material-ui/core/MenuItem';


class Register extends Component {
  constructor() {
    super();
    this.state = {
      name: "",
      email: "",
      password: "",
      password2: "",
      mobile: "",
      errors: {}
    };
  }

  componentDidMount() {
    // If logged in and user navigates to Register page, should redirect them to dashboard
    if (this.props.auth.isAuthenticated) {
      this.props.history.push("/dashboard");
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.errors) {
      this.setState({
        errors: nextProps.errors
      });
    }
  }

  onChange = e => {
    this.setState({ [e.target.id]: e.target.value });
  };

  onSubmit = e => {
    e.preventDefault();

    const newUser = {
      name: this.state.name,
      email: this.state.email,
      password: this.state.password,
      password2: this.state.password2,
      mobile: this.state.mobile
    };

    this.props.registerUser(newUser, this.props.history);
  };

  render() {
    const { errors } = this.state;

    return (
      <div className="container">
        <div className="row">
          <div className="col s8 offset-s2">
            <div className="col s12" style={{ paddingLeft: "11.250px" }}>
              <h4>
                <b>Register</b>
              </h4>
              <p className="grey-text text-darken-1">
                Already have an account? <Link to="/">Log in</Link>
              </p>
            </div>
            <form noValidate onSubmit={this.onSubmit}>

              <div className="input-field col s12">
                <input
                  onChange={this.onChange}
                  value={this.state.name}
                  error={errors.name}
                  id="name"
                  type="text"
                  className={classnames("", {
                    invalid: errors.name
                  })}
                />
                <label htmlFor="name">Name</label>
                <span className="red-text">{errors.name}</span>
              </div>

              <div className="input-field col s12">
                <input
                  onChange={this.onChange}
                  value={this.state.email}
                  error={errors.email}
                  id="email"
                  type="email"
                  className={classnames("", {
                    invalid: errors.email
                  })}
                />
                <label htmlFor="email">Email</label>
                <span className="red-text">{errors.email}</span>
              </div>

              <div className="input-field col s12">
                <input
                  onChange={this.onChange}
                  value={this.state.password}
                  error={errors.password}
                  id="password"
                  type="password"
                  className={classnames("", {
                    invalid: errors.password
                  })}
                />
                <label htmlFor="password">Password</label>
                <span className="red-text">{errors.password}</span>
              </div>

              <div className="input-field col s12">
                <input
                  onChange={this.onChange}
                  value={this.state.password2}
                  error={errors.password2}
                  id="password2"
                  type="password"
                  className={classnames("", {
                    invalid: errors.password2
                  })}
                />
                <label htmlFor="password2">Confirm Password</label>
                <span className="red-text">{errors.password2}</span>
              </div>

              <div className="input-field col s12">
                <input
                  onChange={this.onChange}
                  value={this.state.mobile}
                  error={errors.mobile}
                  id="mobile"
                  type="text"
                  className={classnames("", {
                    invalid: errors.mobile
                  })}
                />
                <label htmlFor="mobile">Mobile No.</label>
                <span className="red-text">{errors.mobile}</span>
              </div>

              <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
                Open Menu
              </Button>

              <Menu
              id="simple-menu"
              anchorEl={anchorEl}
              keepMounted
              open={Boolean(anchorEl)}
              onClose={handleClose}
              >
                <MenuItem onClick={handleClose}>Profile</MenuItem>
                <MenuItem onClick={handleClose}>My account</MenuItem>
                <MenuItem onClick={handleClose}>Logout</MenuItem>
              </Menu>


              <div className="col s12" style={{ paddingLeft: "11.250px" }}>
                <button
                  style={{
                    width: "150px",
                    borderRadius: "3px",
                    letterSpacing: "1.5px",
                    marginTop: "1rem"
                  }}
                  type="submit"
                  className="btn btn-large waves-effect waves-light hoverable blue accent-3"
                >
                  Create
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

Register.propTypes = {
  registerUser: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  errors: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth,
  errors: state.errors
});

export default connect(
  mapStateToProps,
  { registerUser }
)(withRouter(Register));
javascript reactjs material-ui menuitem
2个回答
1
投票

第一。Button 和 Menu 没有定义，所以要导入它们。

import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';

下一个 anchorEl, handleClick, handleClose 未定义

  1. 你可以使用一个参考 anchorEl:
class Register extends Component {
  constructor() {
    super();
    this.state = {
      name: "",
      email: "",
      password: "",
      password2: "",
      mobile: "",
      errors: {},
      open: false
    };
    this.menuRef = React.createRef();
  }

  ...
  1. 接下来，添加 handleClick 和 handleClose 方法。
handleClose = () => {
  this.setState({
    open: false
  });
};

handleClick = () => {
  this.setState({
    open: true
  });
};

另外，一定要加上 state.open: false 到构造函数中。

  1. 最后，将 Button 和 Menu 标记来使用新定义的属性。
<Button
  aria-controls="simple-menu"
  aria-haspopup="true"
  onClick={this.handleClick}
>
  Open Menu
</Button>

<Menu
  id="simple-menu"
  ref={this.menuRef}
  anchorEl={this.menuRef}
  keepMounted
  open={this.state.open}
  onClose={this.handleClose}
>
  <MenuItem onClick={this.handleClose}>Profile</MenuItem>
  <MenuItem onClick={this.handleClose}>My account</MenuItem>
  <MenuItem onClick={this.handleClose}>Logout</MenuItem>
</Menu>

下面是一个演示 的 Menu 启闭，与 react-router 功能被取消

1
投票

下面的问题是 handleClose 和 anchorEl 属性。我想你可能是从素材网站上抄来的，而你抄来的例子是f的。单功能部件 而您在反应中使用的是 类组件。

材料网站上有带功能组件的演示，你可以查看你复制的代码源码。https:/material-ui.comcomponentsmenus。

<Menu
          id="simple-menu"
          anchorEl={anchorEl}
          keepMounted
          open={Boolean(anchorEl)}
          onClose={handleClose}
          >
            <MenuItem onClick={handleClose}>Profile</MenuItem>
            <MenuItem onClick={handleClose}>My account</MenuItem>
            <MenuItem onClick={handleClose}>Logout</MenuItem>
          </Menu>

升级为班级 锚点 和 关机 它将工作。

材料网站功能菜单的演示链接.检查demo.js看到anchorEL和handleclose并在你的逻辑中实现它。https:/codesandbox.iossm1zv?file=demo.js。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.