1 React 事件基础
1 简单描述:
---------------------------------------------------------------------------------------
1 所有事件, 都以 on开头 (包括自定义事件)
2 阻止默认事件的方式, 也是通过事件对象, 调用原生的 API
2 绑定事件方式
1 ES5 的方式:
----------------------------------------------------------------------------------
class P1 extends React.Component{
hh1() {
console.log("hello")}
hh2(e) {
console.log(e)}
hh3(a, b, c) {
console.log(a, b, c)}
render() {
return(<Fragment>
<button onClick={
this.hh1.bind(this)}> 测试 1 </button>
<button onClick={
this.hh2.bind(this)}> 测试 2 </button>
<button onClick={
this.hh3.bind(this, 1, 2)}> 测试 3 </button>
<Fragment/>)
}
}
----------------------------------------------------------------------------------
2 ES6 的方式 1
----------------------------------------------------------------------------------
class P2 extends React.Component{
hh1() {
console.log("hello")}
hh2(e) {
console.log(e)}
hh3(e, a, b) {
console.log(e, a, b)}
render() {
return(<Fragment>
<button onClick={
()=>this.hh1()}> 测试 1 </button>
<button onClick={
(e)=>this.hh2(e)}> 测试 2 </button>
<button onClick={
(e)=>this.hh3(e, 1, 2)}> 测试 3 </button>
<Fragment/>)
}
}
----------------------------------------------------------------------------------
3 ES6 的方式 2
----------------------------------------------------------------------------------
class P3 extends React.Component{
hh1 = () => {
console.log("hello")}
hh2 = (e) => {
console.log(e)}
render() {
return(<Fragment>
<button onClick={
this.hh1()}> 测试 1 </button>
<button onClick={
this.hh2()}> 测试 2 </button>
<Fragment/>)
}
}
----------------------------------------------------------------------------------
4 直接绑定业务操作
----------------------------------------------------------------------------------
function A1(props) {
return (<Fragment>
<button onClick={
(e)=>{
console.log(e)} }> 测试 1 </button>
<Fragment/>)
}
----------------------------------------------------------------------------------
5 函数式组件绑定事件的方式
----------------------------------------------------------------------------------
function A1(props) {
return (<Fragment>
<button onClick={
()=>ck1()}></button>
<Fragment/>)
}
----------------------------------------------------------------------------------