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>