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>