React中事件的用法

前端之家收集整理的这篇文章主要介绍了React中事件的用法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、事件处理函数的使用

鼠标事件:

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 @H_301_333@HelloWorld = @H_301_333@React.@H_301_333@createClass({
        getInitialState:function () {
            return {
                @H_301_333@backgroundColor:'#FFFFFF'  }
        },handleWheel:function () {
            var newColor = (parseInt(this.@H_301_333@state.@H_301_333@backgroundColor.substr(1),16) +
                @H_301_333@event.deltaY * 997).toString(16);
            newColor = '#' + newColor.substr(newColor.@H_301_333@length - 6).toUpperCase();
            this.setState({
                @H_301_333@backgroundColor:newColor
            });
        },render:function () {
            @H_301_333@console.log(this.@H_301_333@state);
            return <div onWheel={this.handleWheel} style={this.@H_301_333@state}>
                <p>Hello,World</p>
            </div>;
        }
    });
    @H_301_333@React.@H_301_333@render(<HelloWorld/>,@H_301_333@document.@H_301_333@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 @H_301_333@HelloWorld = @H_301_333@React.@H_301_333@createClass({
        getInitialState:function () {
            return {
                @H_301_333@password:''  }
        },handleKeyPress:function () {
            this.setState({
                @H_301_333@password:this.@H_301_333@state.@H_301_333@password + @H_301_333@event.@H_301_333@which @H_301_333@ });
            @H_301_333@console.log(this.@H_301_333@state);
        },handleChange:function () {
          @H_301_333@event.@H_301_333@target.@H_301_333@value = '';
        },render:function () {
            @H_301_333@console.log(this.@H_301_333@state);
            return <div>
                <input onKeyPress={this.handleKeyPress} onChange={this.handleChange} />
                <p style={{
                    'display':this.@H_301_333@state.@H_301_333@password.indexOf('495051') >= 0?'inline':'none'  }}>You get it!</p>
            </div>;
        }
    });
    @H_301_333@React.@H_301_333@render(<HelloWorld/>,@H_301_333@document.@H_301_333@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 @H_301_333@HelloWorld = @H_301_333@React.@H_301_333@createClass({
        getInitialState:function () {
            return {
                @H_301_333@x:0,@H_301_333@y:0
            }
        },handleMouseMove:function (event) {
            this.setState({
                @H_301_333@x:event.@H_301_333@clientX,@H_301_333@y:event.@H_301_333@clientY @H_301_333@ });
        },render:function () {
            return <div onMouseMove={this.handleMouseMove}
                style={{
                    @H_301_333@height:'1000px',@H_301_333@width:'700px',@H_301_333@backgroundColor:'gray'  }}>{this.@H_301_333@state.@H_301_333@x + ',' + this.@H_301_333@state.@H_301_333@y}
            </div>;
        }
    });
    @H_301_333@React.@H_301_333@render(<HelloWorld/>,@H_301_333@document.@H_301_333@body);
</script>
</body>
</html>

猜你在找的React相关文章