React事件属性

一、简介

二、滚动例子，滚动改变颜色

 <!DOCTYPE html>
 <html lang="zh-cn">
 <head>
     <meta charset="UTF-8">
     <title>React涓殑浜嬩欢</title>
 </head>
 <body>
     <script src="./react-0.13.2/react-0.13.2/build/react.js"></script>
     <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
     <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>

三、鼠标事件，输对密码才显示内容

 <!DOCTYPE html>
 <html lang="zh-cn">
 <head>
     <meta charset="UTF-8">
     <title>React涓殑浜嬩欢</title>
 </head>
 <body>
     <script src="./react-0.13.2/react-0.13.2/build/react.js"></script>
     <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
     <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}></input>
                 <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>

四、鼠标事件2，记录鼠标的位置

 <!DOCTYPE html>
 <html lang="zh-cn">
 <head>
     <meta charset="UTF-8">
     <title>React涓殑浜嬩欢</title>
 </head>
 <body>
     <script src="./react-0.13.2/react-0.13.2/build/react.js"></script>
     <script src="./react-0.13.2/react-0.13.2/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></HelloWorld>, document.body);
     </script>
 </body>
 </html>