最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

React入门-4.事件处理

XAMPP下载 admin 792浏览 0评论
 事件机制
事件绑定语法
React Element的事件绑定与DOM事件绑定非常相似,有两个不同点需要注意:1) 事件名称采用驼峰式命名。2) 在JSX中事件处理函数为变量,需要使用大括号括起来解析。 3)不能通过return false阻止事件的默认行为,必须通过调用preventDefault()

class MyDiv extends React.Component{
constructor(props){
super(props);
this.state = {status : true}
// 如果要在回调函数中调用this,这行代码不能省略
this.toggle = this.toggle.bind(this);
}
// 事件处理函数
toggle(){
this.setState(state=>({
status:!state.status
}));
}
// 渲染
render(){
return (
<div onClick={this.toggle}>
{this.state.status.toString()} , {this.state.status?’NO’:’OFF’}
</div>
)
}
}

ReactDOM.render(<MyDiv/>,document.getElementById(‘app’));
this取值
函数中的THIS一直是比较纠结的问题。如上示例代码中,如果在构造函数中省略下面这行代码。那么在事件处理函数中将无法使用this。下面这行代码表示将构造函数中的this也就是组件示例本身绑定到事件处理函数上。

this.toggle = this.toggle.bind(this);
当然除了使用这种方式之外,我们还可以使用ES6中的箭头函数,因为箭头函数中没有自身的this,它的this指向它定义的内容也就是组件示例本身。所以第一个案例可以修改为如下

class MyDiv extends React.Component{
constructor(props){
super(props);
this.state = {status : true}
}

// 事件处理函数为箭头函数
toggle = ()=>{
this.setState(state=>({
status:!state.status
}));
}
// 渲染
render(){
return (
<div onClick={this.toggle}>
{this.state.status.toString()} , {this.state.status?’NO’:’OFF’}
</div>
)
}
}

ReactDOM.render(<MyDiv/>,document.getElementById(‘app’));
参数传递
有两种参数传递方式,一种是通过箭头函数直接传递,箭头函数中直接调用事件处理函数,实参为要传递的参数与事件对象

class MyDiv extends React.Component{
constructor(props){
super(props);
this.state = {status : true}
}
// 事件处理函数
toggle = (id,e)=>{
this.setState(state=>({
status:!state.status
}));
}
// 渲染
render(){
return (
<div onClick={(e)=>this.toggle(1,e)}>
{this.state.status.toString()} , {this.state.status?’NO’:’OFF’}
</div>
)
}
}
另外一种是通过调用bind函数,将this与要传递给函数值作为实参进行传递

class MyDiv extends React.Component{
constructor(props){
super(props);
this.state = {status : true}
}
// 事件处理函数
toggle = (id)=>{
this.setState(state=>({
status:!state.status
}));
}
// 渲染
render(){
return (
<div onClick={this.toggle.bind(this,1)}>
{this.state.status.toString()} , {this.state.status?’NO’:’OFF’}
</div>
)
}
}

转载请注明:XAMPP中文组官网 » React入门-4.事件处理

您必须 登录 才能发表评论!