2018-11-07 react 事件处理

react事件处理和dom事件处理是相似的。

  • react:
<button onClick={activateLasers}>
  Activate Lasers
</button>
  • Dom:
<button onclick="activateLasers()">
  Activate Lasers
</button>

所以:

  • React事件绑定属性的命名采用驼峰式写法,而不是小写。
  • 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)
  • react不能使用return false来阻止默认行为,必须使用preventDefault
    DOM:
<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

React:

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容