onClick=""不要出现在用 react 制作的实际元素上. [英] onClick="" don't appear at the actual element made with react.

问题描述

我正在制作一些像这样反应的元素:

var AddNewTask = React.createClass({句柄点击:函数(){console.log('按下了！');},渲染:函数(){返回 (<div className="addNewTask" onClick={this.handleClick}><i className="material-icons">add</i>

);}});

但在实际呈现的 html 页面上，此 div 不包含 onClick 属性.只是看起来像这样.

<i class="material-icons" data-reactid=".0.2.0">add</i>

如何让它出现?

解决方案

它不会出现在呈现的 HTML 中，因为处理程序附加到 DOM 元素本身.React 还标准化了跨浏览器的事件系统，使其行为一致.我建议在官方文档中阅读它的工作原理:https://facebook.github.io/react/docs/events.html

I'm making some elements with react like this:

var AddNewTask = React.createClass({
  handleClick: function() {
   console.log('pressed!');
  },
  render: function() {
    return (
      <div className="addNewTask" onClick={this.handleClick}>
        <i className="material-icons">add</i>
      </div>
    );
  }
});

but on the actual rendered html page this div does not contain onClick property. Just looks like this.

<div class="addNewTask" data-reactid=".0.2">
  <i class="material-icons"  data-reactid=".0.2.0">add</i>
</div>

How to make it appear?

解决方案

It won't appear in the rendered HTML, as the handler is attached to the DOM element itself. React also normalizes the event system across browsers so that it behaves consistently. I would suggest reading up on how it works at the official docs: https://facebook.github.io/react/docs/events.html

这篇关于onClick=""不要出现在用 react 制作的实际元素上.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！