react学习-7.React事件

之前在react组件中，点击按钮改变input框的编辑状态。我们给结构添加onClick,咦？奇怪，为什么不是onclick(),原生js就这样写的啊。

原来：

React处理事件跟在 DOM 元素上处理事件非常相似。但是有一些语法上的区别：

• React 事件使用驼峰命名，之前讲解jsx提过，属性都是驼峰式。而不是全部小写。
• 通过 JSX , 你传递一个函数作为事件处理程序，而不是一个字符串。

    //html
    <button onclick="activateLasers()">
      Activate Lasers
    </button>

    //react
    <button onClick={activateLasers}>
      Activate Lasers
    </button>

• 在 React 中你不能通过返回 false（即 return false; 语句） 来阻止默认行为。必须明确调用 preventDefault。

例如，要阻止链接打开一个新页面的默认行为，可以这样写：

//html
<a href=""http://www.baidu.com" onclick="console.log('链接被点击'); return false">
  Click me
</a>
//输出链接被点击，但未打开新页面


//react
 handleClick(e) {
    e.preventDefault();
    console.log('链接被点击');
  }
  render() {
      return (
        <a href="http://www.baidu.com"  onClick={this.handleClick}>闪动的文字</a>
      )
  }

下一篇——react学习-8.获取真实DOM节点