React事件绑定
React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:
React 事件绑定属性的命名采用驼峰式写法，而不是小写。
如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)
还有一个核心点就是，React事件中的回调函数里面的this是undefined，因为在React中的this是指向组件本身
所以如果想要将回调函数可以绑定事件的话，需要我们自己手动利用bind方法进行指向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
class MyComponent extends React.Component{
constructor(props){
super(props)
//让回调函数指向全局的this属性
this.handleClick = this.handleClick.bind(this)
}
//类中方法的写法
handleClick(data, e){
console.log('触发事件')
// 传过来的参数值
console.log(data)
// 事件的对象
console.log(e)
}
handleClick3(data,e){
console.log(data)
console.log(e)
}
render(){
return (
<div>
<p><button onClick={this.handleClick.bind(this, '你好，今天星期四')}>第一种绑定事件</button></p>
<p><button onClick={(e) => this.handleClick3('你好', e)}>第二种写法绑定事件</button></p>
</div>
)
}
}
ReactDOM.render(
<MyComponent />, document.getElementById('app')
)
</script>