React中事件的用法

发布时间：2020-12-15 08:28:28 所属栏目：百科来源：网络整理

导读：一、事件处理函数的使用鼠标事件： onClick onContextMenu onDoubleClick onMouseDown onMouseEnter onMouseLeave onMouseMove onMouSEOut onMouSEOver onMouseUp onDrop onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart 触摸

一、事件处理函数的使用

鼠标事件：

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!