不使用JSX的onClick

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 個解決方案

解決方案1
2 2015-12-11 18:18:54

解決方案2
0 2018-11-21 10:00:46

不使用JSX的onClick

問題描述

2 個解決方案

解決方案1 2 2015-12-11 18:18:54

解決方案2 0 2018-11-21 10:00:46

解決方案1
2 2015-12-11 18:18:54

解決方案2
0 2018-11-21 10:00:46