react事件处理

React事件处理

react中的事件，是自定义事件，不是原生的DOM事件，为了更好的兼容性，写法采用的是小驼峰写法

onSearchNmae = 函数

1、传统的js事件阻止事件的默认行为，通过return false,而react里面使用preventDefault()函数

2、当我们使用如下写法时，需要去绑定事件的this

handleClick(){
console.log('1111')
}
 <button onClick={this.handleClick}>
 点我
 </button>

此时的this为undefined

// 解决方式需要在构造器里面绑定事件this的指向

constructor(props){
super(props)
this.handleClick.bind(this)
}

// 或者使用箭头函数写法

handleClick = ()=>{
console.log('1111')
}

对于改变this的指向可以使用函数原型上面的call,apply,bind

三者的区别在于：apply 接收两个参数，第一个是指向的this对象，如果为空或者undefiend,null则指向全局window，第二个是数组参数，call和apply类似，只是它的第二个参数为，参数列表，且他们是临时改变this,立即执行，bind也和他们类似，第一个参数this执行对象,第二个参数列表，不同的是，他的第二个参数可以多次传入，且返回的是一个永久执行this的函数，不是立即执行。

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
// 在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind // 的方式，事件对象以及更多的参数将会被隐式的进行传递。

React状态提升、列表渲染、key值作用、受控与非受控组件简单说明