02/11-事件.html
<div id='root'></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <script src="./babel.min.js"></script> <script type="text/babel"> class App extends React.Component{ show(){ //谁在调用show?this.show--->this在调用show,this又是当前得实例对象,按理说是指向前实例对象,但是并没有 //事件函数中得this默认指向得是null,因为react内部,button里的 onClick并不是真正得元素onClick方法,这只是js描述对象,定义了一下之间得关系,真正得是根据描述对象渲染到真实DOM得一个情况,DOM怎么调用得,show里面this就是怎样调用得,内部处理了,真正点得时候不是按照这个对象去调用得,真正点得时候不再是调用App实例了,内部处理了 console.log(this)//null alert('我是show') console.log(this.props.title) //this.props得this也是取不到,因为this是空之4,但如果我们类里面得这个函数(show这个函数)如果是app实例去对用得肯定能调用到,象render这个函数就是app实例去调用得,所以里面得this也指向了类里面得函数,render函数里就放心得用this,因为render函数首先是由react调用出来得,因为首先要用render函数才能拿到描述对象才能渲染页面,所以render肯定是react生成实例去调用的。但是show变成一个事件函数的时候就不再是了,那我们怎么让this指向当前的App实例对象?默认情况下是不可能 } render(){ //show方法现在render这个局部函数里找,找不到再到全局去找,如果定义再App上,相当于定义在类上得方法,就是app.proptotype上 //this.show() //this--->当前得实例对象,就是类上定义得show方法 return (<div> <h1>我是App</h1> <button onClick={this.show}>按钮</button> </div>) } } //App.proptotype.show,App.prptotype.render var app=new App() app.render() //render函数里得this就是app //自己组件得一些事件肯定定义在自己组件得类里面 ReactDOM.render( <div><App title='fsf' content='传递给Child的内容' age={123}/></div>,document.getElementById('root')) </script>
12-事件函数this
<div id='root'></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <script src="./babel.min.js"></script> <script type="text/babel"> class App extends React.Component{ constructor(props){ super(props) //用过在构造函数中用bind修正,让show中的this指向当前实例对象 // this.show=this.show.bind(this) } show(){ console.log(this) alert('我是show') } render(){ console.log(this) //constructor没有写this.show=this.show.bind(this)则this里(也就是app实例对象)没有show方法 return (<div> <h1>我是App</h1> <button onClick={this.show}>按钮</button> </div>) } } ReactDOM.render( <div><App title='fsf' content='传递给Child的内容' age={123}/></div>,document.getElementById('root')) </script>
13-事件函数this
<div id='root'></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <script src="./babel.min.js"></script> <script type="text/babel"> class App extends React.Component{ //定义属性赋值为箭头函数,箭头函数是不管谁去调用,它的this只管定义在哪里就指向哪里,而不是谁调用指向谁 //但是需要bable show=()=>{ console.log(this) alert('我是show') } render(){ console.log(this) //this里(也就是app实例对象)也是有show方法 return (<div> <h1>我是App</h1> <button onClick={this.show}>按钮</button> </div>) } } ReactDOM.render( <div><App title='fsf' content='传递给Child的内容' age={123}/></div>,document.getElementById('root')) </script>
14-事件函数this
<div id='root'></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <script src="./babel.min.js"></script> <script type="text/babel"> class App extends React.Component{ show(){ console.log(this) alert('我是show') } render(){ console.log(this) //this里(也就是app实例对象)也是有show方法 return (<div> <h1>我是App</h1> <button onClick={()=>this.show()}>按钮</button> </div>) } } ReactDOM.render( <div><App title='fsf' content='传递给Child的内容' age={123}/></div>,document.getElementById('root')) //React.createClass定义的组件,事件函数的this是自动绑定到当前实例上,不需要任何处理 </script>
15-事件
<div id='root'></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <script src="./babel.min.js"></script> <script type="text/babel"> class App extends React.Component{ constructor(props){ super(props)//显示写出constructor时,不要忘记在第一行添加super this.show=this.show.bind(this) } show(ev){ //参数event,是经过React处理后的合成的事件对象。类似jq中的事件函数的event对象 //ev.stopPropagation()只能这种方式阻止冒泡 //ev.preventDefault()只有这种方式阻止默认事件 console.log(this.props.title) alert(this.props.title) //阻止默认行为 ev.preventDefault() } render(){ console.log(this) //this里(也就是app实例对象)也是有show方法 return (<div> <h1>{this.props.title}</h1> {/*react支持所有原生js事件*/} <a href="http://baidu.com" onClick={this.show} onMouseMove={this.show}>按钮</a> </div>) } } ReactDOM.render( <div><App title='fsf' content='传递给Child的内容' age={123}/></div>,document.getElementById('root')) </script>