react实现非常好看的toggle按钮和Tooltip

一、效果图如下

二、代码如下

import React, { Component } from "react";
import "./App.css";
import ReactTooltip from 'react-tooltip'
import Switch from "react-switch";
class App extends Component {
	constructor(props) {
		super(props);
		this.state = { checked: false };
		this.handleChange = this.handleChange.bind(this);
	}
	handleChange(checked) {
		this.setState({ checked });
	}
	render() {
		return (
			

				{/* Tooltip */}
				学习Tooltip
				
鼠标移动上去看到Tooltip
				
				{/* 下面是toggle */}
				

					
Simple usage
					
						Switch with custom icons
						
									Off
                                
							}
							checkedIcon={
								
							}
							className="react-switch"
							id="icon-switch"
						/>
					
					
The switch is {this.state.checked ? 'on' : 'off'}.
				
			

); } } export default App;

三、参考网址

https://markusenglund.github.io/react-switch/

https://www.npmjs.com/package/react-tooltip

四、toogle的另外一种样式

import React, { Component } from "react";
import "./App.css";
import Switch from "react-switch";
class App extends Component {
	constructor(props) {
		super(props);
		this.state = { checked: false };
		this.handleChange = this.handleChange.bind(this);
	}
	handleChange(checked) {
		this.setState({ checked });
	}
	render() {
		return (
			

				

					
Simple usage
					
						Switch with custom icons
						
					
					
The switch is {this.state.checked ? 'on' : 'off'}.
				
			
		);
	}
}
export default App;