JZTXT

事件处理

发布时间 2023-04-24 14:15:54作者: 凯宾斯基

事件处理一: 触发函数的方法

import React from 'react'


export default class App extends React.Component {
    render() {
        return (
            <div>
                <input/>
                <button onClick={
                    ()=>{
                        alert("触发函数")
                    }
                }>add 匿名函数触发</button>

                <input/>
                <button onClick={this.handleClick}>add 单独函数触发</button>

                <button onClick={this.handleClick2}>add 单独函数触发,函数另外一种写法</button>

                <button onClick={ ()=>{
                    this.handleClick()
                    this.handleClick2()
                }}>add 里面可以指定执行多个函数</button>
            </div>
        )
    }

    handleClick(){
        console.log("函数触发1")
    }
    handleClick2=() =>{
        console.log("函数触发2")
    }

}

 https://www.bilibili.com/video/BV1dP4y1c7qd/?p=10&vd_source=caabcbd2a759a67e2a3de8acbaaf08ea