五、React事件方法（自寫一個方法（函數），然后用按鈕onClick觸發它、自寫方法改變this指向3種寫法、

上接：https://www.cnblogs.com/chenxi188/p/11782349.html

項目目錄：

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
    manifest.json
  src/
    componets/
        Demo.js
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

一、自寫一個方法（函數），然后用按鈕onClick觸發它

如果想要在react模板render()內執行一個自定方法（函數），就要這樣寫，在components目錄下新建立一個【Demo.js】：

import React from 'react';

class Demo extends React.Component{
    constructor(){
        super();

        this.state={
            name:'xiaoming'
        }
    }

//自定義方法要寫在構造函數外
    run2(){
            alert('這是一個待執行函數')
        }

    render(){
        return(
            <div>
            <button onClick={this.run2}>點這里執行函數</button>
            </div>
            );
    }
}

export default Demo;

【App.js】

import React, { Component } from 'react';
import logo from './logo.svg';
//import './App.css';

//從components文件夾下引入js
import Demo from './components/Demo.js';

class App extends Component {

  render (){
    return(
    <div className="App">
     <h1>這里是app.js根組件</h1>

     <Demo />
    </div>
    );}
}


export default App;

進入項目根目錄：運行cmd：npm start，運行結果：

 

 

 

 二、自寫方法引用構造函數內的數據（改變this指向的）寫法

寫法1【Demo.js】：

import React from 'react';

class Demo extends React.Component{
    constructor(){
        super();

        this.state={
            msg:'this is a state messages!'
        }
    }

//自定義方法:引用構造函數內的數據寫法1（引用時必須.bind(this),否則報錯，找不到msg）：
    run2(){
            alert(this.state.msg)
        }

    render(){
        return(
            <div>
            <button onClick={this.run2.bind(this)}>點這里執行函數</button>
            </div>
            );
    }
}

export default Demo;

寫法2【Demo.js】：

import React from 'react';

class Demo extends React.Component{
    constructor(){
        super();

        this.state={
            msg:'方法2 成功獲取到我咯——state信息!'
        }

        //第2種獲取構造函數state內數據寫法【在構造函數內提前用.bind(this)，聲明this.getmsg()
        this.getmsg=this.getmsg.bind(this);
    }

//自定義方法:引用構造函數內的數據寫法2（引用時）：
    getmsg(){
            alert(this.state.msg)
        }

    render(){
        return(
            <div>
            <button onClick={this.getmsg}>點這里執行函數</button>
            </div>
            );
    }
}

export default Demo;

寫法3：【Demo.js】最省事寫法

import React from 'react';

class Demo extends React.Component{
    constructor(){
        super();

        this.state={
            msg:'方法3 成功獲取到我咯——state信息!'
        }
    }

//自定義方法 引用構造函數內的數據寫法3，不必用.bind(this)：
    getmsg=()=>{
            alert(this.state.msg)
        }

    render(){
        return(
            <div>
            <button onClick={this.getmsg}>點這里執行函數</button>
            </div>
            );
    }
}

export default Demo;

不用.bind(this)時報錯，因為它無法正確指向

 

 App.js用不變，直接刷新網址查看效果：

 

 三、改變state值的寫法this.setState()

import React from 'react';

class Demo extends React.Component{
    constructor(){
        super();

        this.state={
            msg:'這是state的msg原始值'
        }
    }

//用setState()方法重寫state指定值（這里用方法3，箭頭函數改變this指向方式）
    changeMsg=()=>{
            this.setState({
                    msg:"!!!!!!這是state的msg改變值！！！！！"
                })
        }

    render(){
        return(
            <div>
            <h1>{this.state.msg}</h1>
            <button onClick={this.changeMsg}>點這里改變state值</button>
            </div>
            );
    }
}

export default Demo;

運行結果：

點擊后：

 四、通過自寫方法的參數，向state內傳值

【1】pushMsg=(name)=>{this.setState({            msg:name })

【2】onClick={this.pushMsg.bind(this,'我是用參數傳過來的值')}

4.1傳一個參數【Demo.js】：

import React from 'react';

class Demo extends React.Component{
    constructor(props){
        super(props);

        this.state={
        msg:'原始值'
        }
    }
    //【1】自寫帶參數函數
    pushMsg=(name)=>{
        this.setState({
            msg:name
        })
    }

    render(){
        return(
            <div>
            <h1>{this.state.msg}</h1>
            {
                //【2】調用自寫函數用參數傳值到state
            }
            <button onClick={this.pushMsg.bind(this,'我是用參數傳過來的值')}>點這里用方法傳值</button>
            </div>
            )
    }
}

export default Demo;

App.js：

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Demo from './components/Demo'

function App() {
  return (
    <div className="App">
        <img src={logo} className="App-logo" alt="logo" />
        
        <Demo />
    </div>
  );
}

export default App;

【效果】

 

點后：

 

 

 4.2通過自寫函數傳多個參數值到state

 Demo.js

import React from 'react';

class Demo extends React.Component{
    constructor(props){
        super(props);

        this.state={
        msg:'原始值',
        msg2:'原始值2號'
        }
    }
    //自寫帶參數函數
    pushMsg=(name,name2)=>{
        this.setState({
            msg:name,
            msg2:name2
        })
    }

    render(){
        return(
            <div>
            <h1>{this.state.msg}</h1>
            <h1>{this.state.msg2}</h1>
            {
                //調用自寫函數用參數傳值到state
            }
            <button onClick={this.pushMsg.bind(this,'我是用參數傳過來的值。','傳過來第二個值')}>點這里用方法傳值</button>
            </div>
            )
    }
}

export default Demo;

App.js不變

效果：

 

 點后：