React学习笔记（5）--事件

最新推荐文章于 2024-08-10 07:26:17 发布

thystar

最新推荐文章于 2024-08-10 07:26:17 发布

阅读量1.3w

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/thystar/article/details/48047519

版权

web前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.事件处理函数的使用

组件：

React 自有方法
用户定义方法

事件处理函数可以接受event参数；

如之前用过的：

        //监听内容的变化并且记录在状态中
        handleChange: function(event){
            this.setState({inputText: event.target.value});
        },
        //添加提交按钮并打印结果
        handleSubmit: function () {
            console.log("reply To" + this.props.selectName + "\n"
                     + "\n" + this.state.inputText);
        },

编写完事件后需要绑定事件处理函数

如：

onChange={this.handleChange}

<pre class="html" name="code">onChange={this.handleChange}

事件；

1》触摸类事件：只会在移动设备中产生，对手的移动位置进行检测并做出响应

onTouchCancel:
onTouchEnd
onTouchMove
onTouchStart

2》键盘类事件：

onKeyDown
onKeyUp
onKeyPress

3》剪切类事件

onCopy
onCut
onPaste

4》表单类事件

onChange
onInput
onSubmit

5》焦点类事件

onFocus ：获得焦点
onBlur ：失去焦点

6》UI元素：元素或页面的滚动事件

onScroll

7》滚动事件：监听滚动位置，方向

onWheel

8》鼠标类事件：

onClick
onContextMenu ：右键，上下文菜单
onDoubleClickc
onMouseEnter
onMouseDown
onMouseLeave
onMouseMove
onMouseOut
onMouseOver
onMouseUp

9》鼠标拖拽事件：上传内容

onDrop
onDrag
onDragEnd
onDragEnter
onDragExit
onDragLeave
onDragOver
onDragStart

实例1：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
</head>
<body>
    <script type="text/jsx">
        var style = {
            color : "red",
            border: "1px #000 solid"
        };
        var HelloWorld = React.createClass({
            handleChange: function (event) {
                console.log(event.target.value);
            },
            render: function () {
                return <div>
                    <input onChange={this.handleChange} />
                </div>;
            },
        });
        React.render(<div style={style}>
                <HelloWorld></HelloWorld>
            </div>, document.body);
    </script>
</body>
</html>

2 事件对象：

event.target.value

target：事件对象的属性，事件应得DOM元素

事件对象的属性：

1》通用属性

boolean bubbles : 事件是否可以冒泡
boolean cancelable : 事件是否可以取消
DOMEventTarget currentTarget :
boolean defaultPrevented : 事件是否禁止默认行为
number eventPhase : 事件所处的阶段
boolean isTrusted : 事件是否可信，可信事件即用户自定义触发的事件，不可信事件即用js代码触发的事件
DOMEvent nativeEvent 使用原生的浏览器发出的事件对象
void preventDefault() : 禁止默认行为
void stopPropagation() ：禁止冒泡
DOMEventTarget target:
number timeStamp
string type

2》不同事件对象特有的属性

i 剪切事件：

DOMDataTransfer clipboardDate : 得到剪切数据

ii 键盘事件：

boolean altKey ; 是否按下alt键
Number charCode ；按键的编码; 字符编码
boolean ctrlKey ；是否按下ctrl键
function getModifierState(key) ; 是否按下辅助按键ctrl,shift
String key
Number keyCode; 按键编码；非字符
String locale ; 本地化的字符串
Number location ；位置
boolean metaKey; win键
boolean repeat ；按键是否重复
boolean shiftKey；是否按下shift
Number which ; 通用化的charCode和keyCode

iii 焦点

DOMEventTarget relatedTarget : 相关的角度

iv 鼠标事件

boolean altKey；
Number button；
Number buttons；
Number clientX;
Number clientY; 当前鼠标所处的坐标, 顶点是浏览器窗口的左上角
boolean ctrlKey
function getModifierState(key);
boolean metaKey;
Number pageX
Number pageY; 顶点时html页面的左上角
DOMEventTarget relatedTarget ;
Number screenX；
Number scrrenY; p
boolean shiftKey;

v 触摸事件：

boolean altKey
DOMTouchList changedTouchs
boolean ctrlKey
function getModifierState(Key)
boolean metaKey
boolean shiftKey
DOMTouchList targetTouches
DOMTouchList touches

vi UI元素

Number detail ：滚动的距离
DOMAbstractView view ：视图

vii 滚动：

Number deltaMode: 单位
Number deltaX
Number deltaY
Number deltaZ 在坐标轴上对应的位置

实例1

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
</head>
<body>
    <script type="text/jsx">
        var HelloWorld = React.createClass({
            getInitialState: function () {
                return{
                    backgroundColor:'#FFFFFF'
                }
            },
            handleWheel: function (event) {
                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></HelloWorld>
                , document.body);
    </script>
</body>
</html>

实例2

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

3 事件和状态关联

this.setState()

实例1：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
</head>
<body>
    <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></HelloWorld>
                , document.body);
    </script>
</body>
</html>