11-设置事件-传参又有事件源.html

 
  <button onclick="show()">外部按钮button>
  <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">
    function show(ev,param){
      console.log(ev)//事件对象
      console.log(param)//事件调用时传递得参数
      console.log(this)//
      alert('aaaa')
    }
    /*
    JSX设置事件:
        元素属性得事件名要驼峰命名,如onClick,
        事件函数赋值时用{}函数对象,如{show},不是函数调用,如{show()}
        JSX中给事件属性赋值时一定时函数对象

        //bind方法用于改变函数得this,第二,三。。。个参数为传递给函数得实参,返回值为函数本身
        show.bind(this,'hello')//这个返回值是函数本身

        show.apply(this,['aaaa']);
        show.call(this,'aaa')//函数return 后得结果
    */
    ReactDOM.render((<div>
                    {/*当前访问得this为undefined*/}
                    <button onClick={ev=>show(ev,'hello')}>按钮</button>
                    <button onClick={ev=>show.bind(this,ev,'hello2')()}>按钮2</button>
                </div>),document.getElementById('root'))
  
  script>

 

你可能感兴趣的:(11-设置事件-传参又有事件源.html)