javascript React Material UI模式未打开

brtdzjyr 于 2023-06-04 发布在 Java

关注(0)|答案(1)|浏览(189)

我正试图从Material UI中创建一个react组件来打开一个modal。我有切换的状态，我在chrome的react开发者控制台中看到切换从false变为true，但是当我点击按钮时，模态没有打开（按钮只改变了react控制台验证的状态）。

import react from 'react'
import Modal from '@material-ui/core/Modal';
import Button from '@material-ui/core/Button';
import { withStyles } from "@material-ui/core/styles";

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: 400,
      backgroundColor: theme.palette.background.paper,
      border: '2px solid #000',
      boxShadow: theme.shadows[5],
      padding: theme.spacing(2, 4, 3),
    },
  }));

class ModalTest extends react.Component {
    

    state = {
        modalToggle: false
    }

    componentDidMount(){
        
    }

    handleOpen = () => this.setState({modalToggle: true})

    handleClose = () => this.setState({modalToggle: false})
    
    renderModalBody(){
        return (
            <div style={getModalStyle()} className={styles.paper}>
                <h2 id="simple-modal-title">Text in a modal</h2>
                <p id="simple-modal-description">
                This is a test of modal.
                </p>
          </div>
        );
    }

    renderActionButtons(){
        return <Button onClick={this.handleOpen} style={{margin: 0, position: 'absolute',
                                                         top: '50%', left: '50%' }} variant="contained" color="primary">Open Modal</Button>
    }

    renderModal(){
        <Modal open={this.state.modalToggle} onClose={this.handleClose}>{this.renderModalBody()}</Modal>
    }

    render(){
        return this.renderActionButtons()
    }

}

export default withStyles(styles, { withTheme: true })(ModalTest)

JavaScript

来源：https://stackoverflow.com/questions/65525706/react-material-ui-modal-not-opening

1条答案

按热度按时间

gojuced71#

正如@ ChristianFritz所说，您没有调用方法来渲染模型
现在你可以像这样在渲染返回中进行渲染

render(){
return (
   <Button onClick={this.handleOpen} style={{margin: 0, position: 'absolute',
                                                top: '50%', left: '50%' }} 
   variant="contained" color="primary">Open Modal</Button>
    <Modal open={this.state.modalToggle} onClose={this.handleClose}>{this.renderModalBody()}</Modal>
    )

}

因为material ui不会打开模型，直到它的值为true，我建议你使用函数组件，因为它更容易，可以更好地处理，因为每个状态都是由自己管理的，你可以做几乎相同的事情，因为它似乎react团队试图推动使用函数组件更多我写了一个示例代码是函数组件：

export default UserShow;
const ModelTest = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button
        onClick={() => setOpen(true)}
        style={{ margin: 0, position: "absolute", top: "50%", left: "50%" }}
        variant="contained"
        color="primary"
      >
        Open Modal
      </Button>

      <Modal open={open} onClose={() => setOpen(false)}>
        <div style={getModalStyle()} className={styles.paper}>
          <h2 id="simple-modal-title">Text in a modal</h2>
          <p id="simple-modal-description">This is a test of modal.</p>
        </div>
      </Modal>
    </>
  );
};

赞(0）回复(0）举报 2023-06-04

我来回答

javascript React Material UI模式未打开

1条答案

相关问题

热门标签

最新问答