一、簡單的方法

1.效果圖

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需要放到對應目錄下，這兩張圖片需要提前下載，下圖是我的檔案目錄

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>
    );
  }
}