react配合modal实现progress进度条

比眉伴天荒 2022-04-05 13:23 394阅读 0赞

一、简单版，入门

1.学习网址：[https://material-ui.com/demos/progress/][https_material-ui.com_demos_progress]

2.新建一个test.js

npm install @material-ui/core --save

然后将如下代码复制到test.js上

import React, { Component } from 'react';
    import CircularProgress from '@material-ui/core/CircularProgress';
    import './test.css'
    class test extends Component {
      render(){
        return (
          <div className="progress">
              <CircularProgress className={this.props.progress} />
          </div>
      );
      }
    }
    export default test;

然后在App.js输入如下代码

import React, { Component } from 'react';
    import './App.css';
    import Test from './test'
    class App extends Component {
    	constructor(props) {
    		super(props);
    	}
    	render() {
    		return (
    			<div className="App">
    			<Test />
    			</div>
    		);
    	}
    }
    export default App;

3.效果图如下，页面内一个圆圈在不断旋转

![20181212173618750.png][]

二、结合modal，一起应用到实际项目中，点击按钮时，旋转

1.学习modal的网址：

[https://github.com/reactjs/react-modal][https_github.com_reactjs_react-modal]

2.仍然使用上面提到的test.js，代码完全相同。

npm install @material-ui/core --save

npm install react-modal --save

然后在App.js输入如下代码

import React, { Component } from 'react';
    import './App.css';
    import Progress from './test'
    import Modal from 'react-modal';
    Modal.setAppElement('div');
    const customStyles = {
    	content: {
    		top: '50%',
    		left: '50%',
    		right: 'auto',
    		bottom: 'auto',
    		marginRight: '-50%',
    		transform: 'translate(-50%, -50%)',
    		border: '0'
    	}
    };
    class App extends Component {
    	constructor(props) {
    		super(props);
    		this.state = {
    			modalIsOpen: false
    		};
    		this.change = this.change.bind(this);
    		this.openModal = this.openModal.bind(this);
    		this.afterOpenModal = this.afterOpenModal.bind(this);
    		this.closeModal = this.closeModal.bind(this);
    	}
    	openModal() {
    		this.setState({ modalIsOpen: true });
    	}
    	change(){
    		this.setState({ modalIsOpen: true });
    	}
    	afterOpenModal() {
    		// this.subtitle.style.color = '#f00';
    	}
    
    	closeModal() {
    		this.setState({ modalIsOpen: false });
    	}
    	render() {
    		return (
    			<div className="App">
    				<Modal
    				isOpen={this.state.modalIsOpen}
    				onAfterOpen={this.afterOpenModal}
    				onRequestClose={this.closeModal}
    				style={customStyles}
    				>
    				    <Progress />
    				</Modal>
    				<button onClick={this.change}>点击显示modal</button>
    			</div>
    		);
    	}
    }
    export default App;

3.效果图如下：

![20181212174432665.png][]

三、线状progress

![20190109154124404.png][]

import React, { Component } from 'react';
    import LinearProgress from '@material-ui/core/LinearProgress';
    class App extends Component {
    	render() {
    		return (
    			<div>
    				<LinearProgress />
    			</div>
    		);
    	}
    }
    export default App;

[https_material-ui.com_demos_progress]: https://material-ui.com/demos/progress/
[20181212173618750.png]: /images/20220405/295ad95947b7425795dd6b07eb227302.png
[https_github.com_reactjs_react-modal]: https://github.com/reactjs/react-modal
[20181212174432665.png]: /images/20220405/9cbe44dd259d4f30874726a5da4aceb8.png
[20190109154124404.png]: /images/20220405/4d42f78feaa4428099d23317019e4604.png