react实现开关按钮

旧城等待， 2022-04-15 06:18 490阅读 0赞

更好看的效果图查看链接：[https://blog.csdn.net/qq\_37815596/article/details/85006053][https_blog.csdn.net_qq_37815596_article_details_85006053]

一、简单的方法

1.效果图

![20181122155938772.png][]![20181122155948999.png][]

2.代码

import React, { Component } from 'react';
    import './App.css';
    import on from './on.png';
    import off from './off.png';
    class App extends Component {
    	constructor(props) {
    		super(props);
    		this.state = {
    			touchState: false
    		}
    	}
    	touchStart() {
    		this.setState({ touchState: !this.state.touchState });
    	}
    	render() {
    		return (
    			<div className="App">
    				<div onClick={this.touchStart.bind(this)}>
    					<img src={this.state.touchState ? on : off} />
    					<p >{this.state.touchState ? 'open' : ''}</p>
    				</div>
    			</div>
    		);
    	}
    }
    export default App;

3.注意：其中on.png，off.png需要放到对应目录下，这两张图片需要提前下载，下图是我的文件目录

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

4.注意：很多时候，由于页面内可能不止一个按钮，为了使每个按钮互相不影响，应该将上面的单独写一个js文件，封装起来，在需要按钮的地方再引入进去，这样按钮之间点击不会受影响

二、通过从父组件设置值，传入子组件（推荐使用）实现父子组件之间的传值

1.子组件ToggleButton.js

此处的... props.data，要根据你父组件设置的值打印出来看结构才能确定。

import React, { Component } from "react";
    import on from './on.png';
    import off from './off.png';
    class ToggleButton extends Component {
      constructor(props) {
        super(props);
        this.state = {
          ... props.data
        };
      }
      touchStart() {
        this.setState({ bottom:!this.state.bottom });
      }
      render =()=> {
        console.log('this.state.text',this.state.text)
        return (
          <div onClick={this.touchStart.bind(this)}>
            <img src={this.state.bottom ? on : off} /> 
            <p style={
       {display:this.state.bottom?'none':'block'}}>{this.state.text}</p>
          </div>
        );
      }
    }
    export default ToggleButton

2.父组件App.js

只粘贴部分重要代码

import ToggleButton from './ToggleButton'
    class DeviceList extends Component {
      constructor(props) {
        super(props);
      }
      render() {
        return (
          <div>
             <ToggleButton data={
       {bottom: false, text: Patients.fullName}} />
          </div>
        );
      }
    }

[https_blog.csdn.net_qq_37815596_article_details_85006053]: https://blog.csdn.net/qq_37815596/article/details/85006053
[20181122155938772.png]: https://img-blog.csdnimg.cn/20181122155938772.png
[20181122155948999.png]: /images/20220415/2e8b670feed04ab894a6363fee7bf6ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20220415/495f378074ac41b795476831c8e67081.png