React Material UI 模态未打开
React Material UI modal not opening
我正在尝试将来自 material UI 的 React 组件放在一起,以打开模式。我有切换状态,我在 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)
因为@Christian Fritz 说你没有调用渲染模型的方法
现在您可以像这样在渲染 return 中进行渲染
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 之前不会打开模型,我建议您使用功能组件,因为它更容易并且可以更好地处理,因为每个状态都是可管理的就其本身而言,您可以做与 class 组件几乎相同的事情,而且似乎 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>
</>
);
};
我正在尝试将来自 material UI 的 React 组件放在一起,以打开模式。我有切换状态,我在 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)
因为@Christian Fritz 说你没有调用渲染模型的方法
现在您可以像这样在渲染 return 中进行渲染
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 之前不会打开模型,我建议您使用功能组件,因为它更容易并且可以更好地处理,因为每个状态都是可管理的就其本身而言,您可以做与 class 组件几乎相同的事情,而且似乎 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>
</>
);
};