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 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中事件的用法

猜你喜欢