zoukankan      html  css  js  c++  java
  • React 事件处理

    1、事件绑定

      React 事件绑定语法与DOM事件语法类似。

      语法:on+事件名称=(事件处理程序),比如:onClick = { ()=> {} }

      注意:React 事件采用驼峰命名法,比如:onMouseEnter、onFocus

    在类组件中绑定事件

    class App extends React.Component {
        // 事件处理程序
        handleClick() {
            console.log('单击事件触发了')
        }
        render() {
            return (
                <button onClick={ this.handleClick }>123</button>
            )
        }
    }
    ReactDOM.render(<App/>, document.getElementById('root'))

    在函数组件中绑定事件

    function App() {
        function handleClick() {
            console.log('事件触发啦')
        }
        return (
            <button onClick={ handleClick }>AppFun</button>
        )
    }
    ReactDOM.render(<App/>, document.getElementById('root'))

    2、事件对象

      可以通过事件处理程序的参数(e)获取到事件对象

      React 中的事件对象叫做:合成事件(对象)

      合成事件:兼容所有浏览器,无需担心跨浏览器兼容性问题

    class App extends React.Component {
        // 事件处理程序
        handleClick(e) {
            console.log('事件对象',e)
            // 阻止浏览器默认行为
            e.preventDefault();
        }
        render() {
            return (
                <a href="https://www.baidu.com" onClick={ this.handleClick }>点我,不会跳转页面</a>
            )
        }
    }
  • 相关阅读:
    如何优雅地结束线程的生命周期
    线程的interrupt()
    线程的join()方法
    守护线程Daemon
    使用多线程模拟一个银行叫号窗口
    多线程介绍
    十八、MySQL 数据排名查询某条数据是总数据的第几条
    spring cloud stream整合
    036线程进程(重要)
    035server端并发聊天
  • 原文地址:https://www.cnblogs.com/bingquan1/p/15720781.html
Copyright © 2011-2022 走看看