6 react 事件繫結

1. 事件繫結方式一：全域性方法返回react dom 方式繫結

function
actionlink() 
//使用 onclick= 繫結事件
return
(      
click me
);}var element = actionlink()  //
返回乙個reactdom
class parent extends react.component 
render ()   
//掛載reactdom
)    }
}

2. 繫結事件方式二：成員方法繫結

構造方法中改變this指向： this.handleclick = this.handleclick.bind(this);

rend 方法的dom中繫結事件： onclick=>

class toggle extends react.component ;
//為了在**中使用 `this`，這個繫結是必不可少的
this.handleclick = this.handleclick.bind(this
);  }
handleclick() ));
}  render() >
);  }
}reactdom.render(  ,
document.getelementbyid('root')
);

3. 如果不使用function.prototype.bind 改變 this 指向，怎麼繫結事件？有兩種方式：

方式1：使用 public class fields 語法。官方建議使用該方式。

方式2：使用箭頭函式。每次渲染都會建立不同的**。如果該**作為引數傳遞給子元件時，會觸發重新渲染，有效能問題。

//
方式1class loggingbutton extends react.component 
render() >click me
);  }
}

//
方式2class loggingbutton extends react.component 
render() >click me
);  }
}

4. 事件處理函式中傳遞引數

// 1. 箭頭函式傳遞引數
this.deleterow(id, e)}>delete row
// 2. 普通方式
this.deleterow.bind(this, id)}>delete row
// 3. 匿名函式
delete row

class loggingbutton extends react.component 
handleclick2(id, e) 
render() >  // 事件物件 和 其他引數傳遞click me 1
this.handleclick2.bind(this, "id2")}>  // 實參傳遞， 預設傳遞事件對物件為第二個引數click me 2
);  }
}reactdom.render(  ,
document.getelementbyid('root')
);

注意事項：

1. react 中事件預設行為不能通過 return false 阻止，必須 e.preventdefault();

2. react 中的事件物件 e 不是原生的事件物件，是包裝後的；

this.deleterow.bind(this, id)

6 react中的互動

1.ajax 再react中使用ajax和直接使用ajax的用法是完全一樣的，只要找好路徑即可，但是也有不一樣的地方，再react中是通過改變狀態state來達到讓元件重新渲染的效果，並且放ajax的鉤子函式一般會放在例項化期的componentdidmount中，因為再這個時候真實已經渲染完成了 ...

React 事件繫結

一 class方式定義元件事件繫結的幾種方法一在建構函式中使用bind繫結this 1 class button extends react.component 6handleclick 9render 12click me 1314 15 16 二在呼叫的時候使用bind去繫結this 1 ...

6 react 事件繫結

6 react中的互動

React 事件繫結

React 事件繫結

相關推薦