This article is based on the Windows 10 system environment, learning and using React: Windows 10 1. setInterval function(1) Definition The setInterval() method calls a function or evaluates an expression at a specified period (in milliseconds). (2) Examplesimport React, { Component } from 'react'; import { Radio, Button, Icon } from 'antd'; class List extends Component { constructor(props) { super(props); this.state = { online: false, }; }; handleLogin=()=>{ localStorage.setItem('username','xuzheng'); }; handleLogout=()=>{ localStorage.removeItem('username'); }; componentDidMount(){ this.timer = setInterval(() => { this.setState({ online: localStorage.username ? true : false, }) }, 1000); } componentWillUnmount() { if (this.timer != null) { clearInterval(this.timer); } } render() { return ( <div> <div> <Icon type='user' style={{marginRight:'8px'}}/> <span>{localStorage.username ? localStorage.username : 'Not logged in'}</span> </div> <div style={{marginTop:'20px'}}> <Button type='primary' onClick={this.handleLogin}>Login</Button> </div> <div style={{marginTop:'20px'}}> <Button type='primary' onClick={this.handleLogout}>Logout</Button> </div> </div> ) } } export default List; This is the end of this article about the use of setInterval function in React. For more information about the use of setInterval function in React, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: How to install MySQL using yum on Centos7 and achieve remote connection
>>: Tutorial on using iostat command in Linux
Overview This article begins to introduce content...
Table of contents Preface 1. Installation 1. Down...
Table of contents 1. What does shallow copy mean?...
Preface In databases such as Oracle and SQL Serve...
Table of contents 1 redis configuration file 2 Do...
Preface 1. Debounce: After a high-frequency event...
This article shares the installation tutorial of ...
Here is a case study on how to close ads using Ja...
Table of contents 1. Build local storage 2. Creat...
If you think the system is slow and want to chang...
background When developing a feature similar to c...
This article shares the installation and configur...
What is a sticky footer layout? Our common web pa...
Use wget command to download the entire subdirect...
Dependence on knowledge Go cross-compilation basi...