添加事件

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

  • React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
  • 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。
    1. class HelloWorld extends React.Component {
    2. say(){
    3.   console.log('say...');
    4. }
    5. render(){
    6.   return (
    7.     <div>
    8.       <h2 onClick={this.say}>hello,world!</h2>
    9.     </div>
    10.   )
    11. }
    12. }
    13. // 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
    14. ReactDOM.render(<HelloWorld />,document.getElementById('root'));

    event对象

    在这里，e 是一个合成事件。React 根据 W3C 规范来定义这些合成事件，所以你不需要担心跨浏览器的兼容性问题。React 事件与原生事件不完全相同。如果想了解更多，请查看 SyntheticEvent 参考指南。
    1. class HelloWorld extends React.Component {
    2. say(e){
    3.   console.log('say...');
    4.   console.log(e.target);
    5. }
    6. render(){
    7.   return (
    8.     <div>
    9.       <h2 onClick={this.say}>hello,world!</h2>
    10.     </div>
    11.   )
    12. }
    13. }
    14. // 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
    15. ReactDOM.render(<HelloWorld />,document.getElementById('root'));
    image.png

    向事件传参

    这里我们必须通过箭头函数返回一个新的函数来实现onClick传参的目的.
    1. class HelloWorld extends React.Component {
    2. say(e){
    3.   console.log('say...');
    4.   console.log(e.target);
    5. }
    6. jumpTo(e){
    7.   // 可以通过e阻止默认事件
    8.   e.preventDefault();
    9.   console.log(e.target);
    10. }
    11. deleteById(id,e){
    12.   console.log(e);
    13.   console.log('删除: '+id);
    14. }
    15. render(){
    16.   return (
    17.     <div>
    18.       <h2 onClick={this.say}>hello,world!</h2>
    19.       <a href="https://bufanui.com" onClick={this.jumpTo}>不凡官网</a>
    20.       <p onClick={e=> this.deleteById(1,e)}>id:1的数据</p>  
    21.     </div>
    22.   )
    23. }
    24. }
    25. // 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
    26. ReactDOM.render(<HelloWorld />,document.getElementById('root'));
    image.png

    关于this

    你必须谨慎对待 JSX 回调函数中的 this，在 JavaScript 中，class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined。
    这并不是 React 特有的行为；这其实与 JavaScript 函数工作原理有关。通常情况下，如果你没有在方法后面添加 ()，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。—原文

例子1:
实际上报错,打印this是 undefined .

  1. class HelloWorld extends React.Component {
  2.   constructor(props){
  3.     super(props);
  4.     this.state = ({
  5.       toggle: true
  6.     })
  7.   }
  8.   toggleBtn(){
  9.     console.log('this',this);
  10.     // 注意: 这里必须返回一个state对象
  11.     this.setState((state)=>({
  12.       toggle: !state.toggle
  13.     }))
  14.   }
  15.   render(){
  16.     return (
  17.       <div>
  18.         <button onClick={this.toggleBtn}>开关/{this.state.toggle?'关闭':'开启'}</button>
  19.       </div>
  20.     )
  21.   }
  22. }
  23. // 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
  24. ReactDOM.render(<HelloWorld />,document.getElementById('root'));

image.png
我们稍作修改, 在构造方法通过bind重新绑定this:
这样我们实现了效果,而且发现在__proto__上和构造函数中都存在 toggleBtn().

  1. class HelloWorld extends React.Component {
  2.   constructor(props){
  3.     super(props);
  4.     this.state = ({
  5.       toggle: true
  6.     })
  7.     // 在构造函数里通过bind重新绑定this
  8.     this.toggleBtn = this.toggleBtn.bind(this);
  9.   }
  10.   toggleBtn(){
  11.     console.log('this',this);
  12.     // 注意: 这里必须返回一个state对象
  13.     this.setState((state)=>({
  14.       toggle: !state.toggle
  15.     }))
  16.   }
  17.   render(){
  18.     return (
  19.       <div>
  20.         <button onClick={this.toggleBtn}>开关/{this.state.toggle?'关闭':'开启'}</button>
  21.       </div>
  22.     )
  23.   }
  24. }
  25. // 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
  26. ReactDOM.render(<HelloWorld />,document.getElementById('root'));

image.png
例子2:
我们通过箭头函数声明toggleBtn(), 结果正常,,因为箭头函数会继承父类的this,所以这里的this指向实例对象.
从打印的结果我们可以看到, 箭头函数声明的方法,可以等同于在构造函数中通过this声明. 

  1. class HelloWorld extends React.Component {
  2.   constructor(props){
  3.     super(props);
  4.     this.state = ({
  5.       toggle: true
  6.     })
  7.   }
  8.   // 这里改成箭头函数,由于箭头函数会继承父类的this,所以这里的this指向实例对象.
  9.   toggleBtn=()=>{
  10.     console.log('this',this);
  11.     // 注意: 这里必须返回一个state对象
  12.     this.setState((state)=>({
  13.       toggle: !state.toggle
  14.     }))
  15.   }
  16.   render(){
  17.     return (
  18.       <div>
  19.         <button onClick={this.toggleBtn}>开关/{this.state.toggle?'关闭':'开启'}</button>
  20.       </div>
  21.     )
  22.   }
  23. }
  24. // 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
  25. ReactDOM.render(<HelloWorld />,document.getElementById('root'));

image.png