React事件

React添加事件

在react中，我们想要给组件的dom添加事件的话，也是需要在行内添加的方式，事件名字需要写成小驼峰的方式，值利用表达式传入一个函数即可。（原生的事件全是小写onclick, React里的事件是驼峰onClick）

注意，在没有渲染的时候，页面中没有真实dom，所以是获取不到dom的

给虚拟dom结构中的节点添加样式。在行内添加,写成驼峰形式，值是一个函数名，需要用 { } 包裹.

class App extends React.Component {
	handleClick(){
		alert(this) //有问题的！
	}
    render () {
        return (
                <div className='app' id='appRoot'>
                    <h1 className='title'>欢迎进入React的世界</h1>
                    <p onClick={this.handleClick}>
                    	React.js 是一个构建页面 UI 的库
                    </p>
                </div>
            )
        }
}
ReactDOM.render(<App/>,document.getElementById("box"))

这里要解决函数内部this指向问题
方法一：使用es6剪头函数

 handleClick = () =>{
  	console.log(this)
  }
 <p><button onClick={this.handleClick}>改变count</button></p>

方法二：在构造器函数里进行this绑定

    constuctor(){
        super()
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick(){
        console.log(this)
    }

    <p><button onClick={this.handleClick}>改变count</button></p>