文章參考

案例說明

import React from "react"
import { NavBar, Button, Icon } from "antd-mobile"

class Photegraph extends BaseComponent {
	// video 和 mediaStreamTrack 是Photegraph類的屬性
    video;
    mediaStreamTrack;
	// 建構函式
	constructor (props) {
        super(props);
		// 給openPhoto方法的指標指向當前物件，在jsx中就不需要再使用bind指定物件了
 

        this.openPhoto = this.openPhoto.bind(this);
	}
	
	// react 物件生命週期函式，表示節點掛載之前執行的方法
    componentWillMount() {
        
    }

    // 利用canvas獲取vedio中的圖片，並在canvas中顯示
    snapshootAction(){
        console.log("snapshootAction");
    }

    // 上傳檔案
    uploadFile(){
        console.log("uploadFile")
 
;
    }

    closePhoto(){
        this.mediaStreamTrack && this.mediaStreamTrack.stop();
    }

    // 開啟攝像頭
    openPhoto(){
        console.log("openPhoto");
    }

    // 回退到上一個頁面
    backPage(){
        console.log("backPage");
    }

    render () {
        return (
        <div>
            <
 
NavBar
                mode="light"
                icon={<Icon type="left" />}
                onLeftClick={this.backPage}
            >拍照識別</NavBar>
            <div style={{padding:"0px 16px"}}>
                <Button type="primary" onClick={this.openPhoto}>開啟攝像頭</Button>
                <Button type="primary" onClick={()=>this.snapshootAction()}>截圖</Button>
                <Button type="primary" onClick={()=>this.closePhoto()}>關閉攝像頭</Button>
                <Button type="primary" onClick={this.uploadFile.bind(this)}>上傳檔案</Button>
            </div>
        </div>
        );
    }

}

export default Photegraph;

在JSX中定義函式的寫法

1. 函式名一定是駝峰命名法，例如onClick
2. 函式一定要用{}包裹起來，表示是一個變數或者函式名

不能使用“函式名()”,後面的括號表示執行函式，因此使用()=>this.closePhoto()箭頭函式，返回定義的函式

3. onLeftClick={this.backPage}，直接指明函式名字，後面沒有括號，也沒有傳遞this物件和引數
4. onClick={this.uploadFile.bind(this)} 把方法內部的物件改為this，傳遞上下文