一、编写事件处理函数 #

image.png

image.png

书写方式

var Demo = React.createClass({
        getInitialState:function(){        },
        handleClick: function(event){        },
        handleChange: function(){        },
        render:function(){        },
    })

二、绑定事件处理函数 #

其他的事件

var Demo = React.createClass({
    handleClick:function(e){
        console.log(e)
        console.log(e.target)
        console.log(e.nativeEvent)
    },
    render:function(){
        return <div onClick={this.handleClick}>Hello World</div>
    }
})
ReactDOM.render(<Demo/>,document.getElementById('app'))
var Demo = React.createClass({
    getInitialState:function(){
        return {
            width: 200,
            height: 200,
            backgroundColor: '#DDDDDD'
        }
    },
    /*handleWheel:function(e){
        var newColor = (parseInt(this.state.backgroundColor.substr(1),16) + e.deltaY).toString(16)
        newColor = '#' + newColor.toUpperCase()
        console.log(newColor)
        this.setState({
            backgroundColor:newColor
        })
    },*/
    randomColor:function(){
        var r = Math.floor(Math.random()*256);
        var g = Math.floor(Math.random()*256);
        var b = Math.floor(Math.random()*256);
        return 'rgb('+r+','+g+','+b+')'
    },
    handleWheel:function(){
        this.setState({
            backgroundColor:this.randomColor()
        })
    },
    render:function(){
        return <div onWheel={this.handleWheel} style={this.state}>这是一个案例,鼠标滚动实现背景颜色的变化</div>
    }
})
ReactDOM.render(<Demo/>,document.getElementById('app'))

三、事件对象 #

事件对象的使用

image.png

image.png

image.png

image.png

四、事件与状态关联 #

inputChange:function(event){
    this.setState({
        inputText:event.target.value
    })
}