首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Material UI模式不工作(React JS)

Material UI模式不工作(React JS)
EN

Stack Overflow用户
提问于 2018-01-31 11:58:01
回答 1查看 8.9K关注 0票数 7

我试图从material ui示例中复制一个模式的示例,但我无法使其工作,首先我得到一个"Cannot read property 'setState‘of undefined“我解决了这个问题,现在控制台中没有错误,但当我点击显示该模式的按钮时,什么也没有发生。

Im使用material-ui v1.0.0-beta.31

代码如下:

代码语言:javascript
复制
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Typography from 'material-ui/Typography';
import Modal from 'material-ui/Modal';
import Button from 'material-ui/Button';

function rand() {
  return Math.round(Math.random() * 20) - 10;
}

function getModalStyle() {
  const top = 50 + rand();
  const left = 50 + rand();

  return {
    top: `${top}%`,
    left: `${left}%`,
    transform: `translate(-${top}%, -${left}%)`,
  };
}

const styles = theme => ({
  paper: {
    position: 'absolute',
    width: theme.spacing.unit * 50,
    backgroundColor: theme.palette.background.paper,
    boxShadow: theme.shadows[5],
    padding: theme.spacing.unit * 4,
  },
});

class SimpleModal extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
    this.handleOpen = this.handleOpen.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  handleOpen() {
    this.setState({ open: true });
  };

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

  render() {
    const { classes } = this.props;

    return (
      <div>
        <Typography gutterBottom>Click to get the full Modal experience!</Typography>
        <Button onClick={this.handleOpen}>Open Modal</Button>
        <Modal
          aria-labelledby="simple-modal-title"
          aria-describedby="simple-modal-description"
          open={this.state.open}
          onClose={this.handleClose}
        >
          <div style={getModalStyle()} className={classes.paper}>
            <Typography type="title" id="modal-title">
              Text in a modal
            </Typography>
            <Typography type="subheading" id="simple-modal-description">
              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </Typography>
            <SimpleModalWrapped />
          </div>
        </Modal>
      </div>
    );
  }
}

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


const SimpleModalWrapped = withStyles(styles)(SimpleModal);

export default SimpleModalWrapped;

与原始示例相比,与上面的代码唯一的区别是我添加了以下内容:

代码语言:javascript
复制
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
    this.handleOpen = this.handleOpen.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

谢谢!

EN

回答 1

Stack Overflow用户

发布于 2018-01-31 12:36:07

在呈现按钮时尝试绑定this

<Button onClick={this.handleOpen.bind(this)}>Open Modal</Button>

同样,对于modal,onClose={this.handleClose.bind(this)},不需要这些行:

代码语言:javascript
复制
this.handleOpen = this.handleOpen.bind(this);
this.handleClose = this.handleClose.bind(this);
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/48534232

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档