Question

我有一个React的特殊应用程序，以便在我不想使用JSX的地方工作，以及我需要监视React之外的链接的点击。我似乎无法触发onClick事件。我需要的代码才能使链接处于非活动状态。

var LinkCell = React.createClass({
      render: function(){
        var attr = {
          "data-id":this.props.dataID,
          "href": this.props.href,
          "onClick": function(){return false}
        };
        var lnk = React.DOM.a(attr,this.props.href);

        return React.DOM.td({},lnk);
      }
    });

这不起作用，链接转到href中的URL。我是否必须在JSX中执行此操作？

Answer 1

实际上我找到了解决方案。正如您可能知道回调通常是否返回false，您必须放入onclick属性

return mycallbackfunction();

使用此代码我必须使用preventDefault（）;.我不知道为什么我之前没有尝试过，但感谢您的回复。

var LinkCell = React.createClass({
      render: function(){
        var attr = {
          "data-id":this.props.dataID,
          "href": this.props.href,
          onClick:function(e){e.preventDefault();}
        };
        var lnk = React.DOM.a(attr,this.props.href);

        return React.DOM.td({},lnk);
      }
    });

Answer 2

我为此找到了最佳解决方案

//like_button.js
'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Click This'
    );
  }
}

const domContainer = document.getElementById('domContainer');
ReactDOM.render(e(LikeButton), domContainer);

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<div id="domContainer"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="like_button.js"></script>
</body>
</html>

在没有JSX的情况下实现onClick

2 个答案: