React 基本事件用法

阿新 • • 發佈：2019-01-17

一、事件處理函式的使用

滑鼠事件：

onClick

onContextMenu

onDoubleClick

onMouseDown

onMouseEnter

onMouseLeave

onMouseMove

onMouseOut

onMouseOver

onMouseUp

onDrop

onDrag

onDragEnd

onDragEnter

onDragExit

onDragLeave

onDragOver

onDragStart

觸控事件：

onTouchCancel

onTouchEnd

onTouchMove

onTouchStart

鍵盤事件：

onKeyDown

onKeyPress

onKeyUp

剪下事件：

onCopy

onCut

onPaste

表單事件：

onChange

onInput

onSubmit

焦點事件：

onFocus

onBlur

UI事件:

onScroll

滾動事件：

onWheel

二、事件物件介紹

例項程式碼：

<!DOCTYPE html>
<html lang="zn-cn">
<head>
    <meta charset="UTF-8">
    <title>React</ 
title>
</head>
<body>
<script src="./build/react.js"></script>
<script src="./build/JSXTransformer.js"></script>
<script type="text/jsx">
    var HelloWorld = React.createClass({
        getInitialState:function () {
            return {
                backgroundColor 
:'#FFFFFF'
}
        },
        handleWheel:function () {
            var newColor = (parseInt(this.state.backgroundColor.substr(1),16) +
                event.deltaY * 997).toString(16);
            newColor = '#' + newColor.substr(newColor.length - 6).toUpperCase();
            this.setState({
                backgroundColor:newColor
});
        },
        render:function () {
            console.log(this.state);
            return <div onWheel={this.handleWheel}style={this.state}>
                <p>Hello,World</p>
            </div>;
        }
    });
    React.render(<HelloWorld/>,document.body);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zn-cn">
<head>
    <meta charset="UTF-8">
    <title>React</title>
</head>
<body>
<script src="./build/react.js"></script>
<script src="./build/JSXTransformer.js"></script>
<script type="text/jsx">
    var HelloWorld = React.createClass({
        getInitialState:function () {
            return {
                password:''
}
        },
        handleKeyPress:function () {
            this.setState({
                password:this.state.password + event.which
});
            console.log(this.state);
        },
        handleChange:function () {
          event.target.value = '';
        },
        render:function () {
            console.log(this.state);
            return <div>
                <input onKeyPress={this.handleKeyPress}onChange={this.handleChange} />
                <p style={{
                    'display':this.state.password.indexOf('495051') >= 0?'inline':'none'
}}>You get it!</p>
            </div>;
        }
    });
    React.render(<HelloWorld/>,document.body);
</script>
</body>
</html>

三、事件和狀態關聯

例項如下：

<!DOCTYPE html>
<html lang="zn-cn">
<head>
    <meta charset="UTF-8">
    <title>React</title>
</head>
<body>
<script src="./build/react.js"></script>
<script src="./build/JSXTransformer.js"></script>
<script type="text/jsx">
    var HelloWorld = React.createClass({
        getInitialState:function () {
            return {
                x:0,
                y:0
}
        },
        handleMouseMove:function (event) {
            this.setState({
                x:event.clientX,
                y:event.clientY
});
        },
        render:function () {
            return <div onMouseMove={this.handleMouseMove}style={{
                    height:'1000px',
                    width:'700px',
                    backgroundColor:'gray'
}}>{this.state.x + ', ' + this.state.y}
            </div>;
        }
    });
    React.render(<HelloWorld/>,document.body);
</script>
</body>
</html>

React 基本事件用法

一、事件處理函式的使用滑鼠事件： onClick onContextMenu onDoubleClick onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver

javascript中的常用表單事件用法

round onload tel logs () case span onsubmit change 下面介紹幾種javascript中常用的表單事件；一，onsubmit：表單中的確認按鈕被點擊時發生的事件，如下案例。案例解析：彈出表單中提交的內容

onbeforepaste事件用法

style 事件 bsp 執行 sin 裏的保留 spa txt onbeforepaste事件用法 (2011-12-02 18:12:52) onbeforepaste="clipboardData.setData(‘text‘,clip

WinForm中Application.Idle事件用法

round -c image orm cut public 技術 btn geb Application.Idle 事件描述：當應用程序完成處理並即將進入空閑狀態時發生。如果您有必須執行的任務在線程變為空閑之前，請將它們附加到此事件。 1 publi

Hbase基本語句用法

常用命令 hbase 使用hbase shell命令進入hbase：[[email protected]~]# hbase shell SLF4J: Class path contains multiple SLF4Jbindings. SLF4J: Found binding in[jar

[js高手之路]深入淺出webpack系列1-安裝與基本打包用法和命令參數

查看 2-2 gre colors 令行一起切換 json round webpack，我想大家應該都知道或者聽過，Webpack是前端一個工具,可以讓各個模塊進行加載,預處理,再進行打包。現代的前端開發很多環境都依賴webpack構建，比如vue官方就推薦使用webp

React 滾動事件

true delta subst 事件 rip utf and uil blog 代碼： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"&g

React基本概念(三)

reactDOM操作操作底層DOM的使用場景：當需要與一個沒有使用React的第三方類庫進行整合，或執行一個React沒有原生支持的操作時。訪問受控的DOM節點：想要訪問受React控制的DOM節點，首先必須能夠訪問到負責控制這些DOM的組件。這可以通過為子組件添加一個ref屬

轉載：.Net 程序集簽名工具sn.exe 密鑰對SNK文件最基本的用法

就是好的 image info 內容 vcenter 項目文件麻煩 cto .Net 程序集簽名工具sn.exe 密鑰對SNK文件最基本的用法闡述簽名工具這個概念之前，我先說說它不是什麽：　　1.它不是用於給程序集加密的工具，它與阻止Reflector或ILSp

saltstack之salt event事件用法

OS CP values exists medium highlight -a character jid 　　event是一個本地的ZeroMQ PUB Interface，event是一個開放的系統，用於發送信息通知salt或其他的操作系統。每個event都有一個標簽。

react中事件冒泡之填坑

app 簡單冒泡 wrapper change checked 執行 class 讓我今天在寫個組件，大致代碼是這樣的： class Switch extends React.Component { handlerChange = (e) => {

Funcation ALV 事件用法（編輯ALV ，直接保存修改數據到DB）

acs mit lba ngs stand orm suitable fail cells *&---------------------------------------------------------------------* *& REPORT

Redux 入門教程（三）：React-Redux 的用法

建立 www counter reducer creates 所有 port 操作 lin 作者：阮一峰前兩篇教程介紹了 Redux 的基本用法和異步操作，今天是最後一部分，介紹如何在 React 項目中使用 Redux。為了方便使用，Redux 的作者封裝

Javascript 基本事件響應處理

HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點選某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標籤來定義事件動作。屬性當以下情況發生時，出現此

從零開始的unity2017筆記【基本程式碼用法，追加中..】

零、標頭檔案 using UnityEngine.SceneManagement;（場景切換要用） using UnityEngine.UI;（對ui物件進行操作時要用）一、寫在start()前面的 public(公開的) 命名引數時在其前面加m_則在元件上顯示的引數名不會

js中的onclick事件和JQuery中的click方法以及on方法事件用法總結

1.onclick是繫結的事件(它是一個事件)，注意該事件繫結只是JacaScript中有(js中的)，Jquery中並沒有此事件，告訴瀏覽器在滑鼠點選時候要做什麼 2.click方法(jquery中的)作用是觸發onclick事件，只要執行了元素的click()方法，就會觸發onclick事件

React父子事件傳遞方式

實現父子元件雙向資料傳遞： 1，（父 ---> 子）父元件可以向子元件傳遞props，props中帶有初始化子元件的資料，還有回撥函式。 2，（子 ---> 父）子元件通過呼叫父元件傳遞到子元件的方法向父元件傳遞資料。 PS：更改props值是不能觸發重新渲染的，只有呼叫se

Kubernetes裡的secret最基本的用法

Secret解決了密碼、token、金鑰等敏感資料的配置問題，使用Secret可以避免把這些敏感資料以明文的形式暴露到映象或者Pod Spec中。 Secret可以以Volume或者環境變數的方式使用。使用如下命令列建立一個secret： kubectl create se

react基本語法及元件

一、react簡介 1、起源：React 起源於 Facebook 的內部專案，用來架設 Instagram 的網站，並於 2013 年 5 月開源。 2、特點： 1.宣告式設計 −React採用聲明範式，可以輕鬆描述應用。 2.高效 −React通過對DOM的模擬，最大限度地減少與DOM的互動

react-native react-navigation的用法 react native 導航路由元件react-navigation的使用

一、問題背景 react-navigation是react-native官方推薦的，基於Javascript的可擴充套件且使用簡單的導航，功能強大且完備回顧一下，react-navigation包含以下功能來幫助我們建立導航器: StackN

React 基本事件用法

相關推薦