Question

该应用使用node.js和react.js（即react-async）。所以有一个react组件有一个click处理程序，我想在其中获取该组件的类名（即minus_decrement和inline_block）。我在node.js中使用了jQuery（详情here）。

var MinusDecrement=React.createClass({

       clickHandler:function(e){

                    $div = $(this);

                    //$div=this.refs.minusDecElem.getDOMNode();

                    var className=$div.attr('class');
                   // var classNameReact=$div.attr('className');
                    if(window.console){

                     console.log("className = "+className);

                           } 

                   e.stopPropagation();

    },      

    render:function(){

        return (

             <span className="minus_decrement inline_block" onClick={this.clickHandler} >&nbsp;-&nbsp;&nbsp;</span>     

        );

    }

});

使用以下行创建组件时

<MinusDecrement></MinusDecrement>

，控制台输出显示undefined。在将.attr(className)添加到this.refs.minusDecElem.getDOMNode()元素后，我尝试使用href和span但是徒劳无功。评论中提到了两个备用代码行。

如何通过jQuery获取类名？

Answer 1

通过调用$(this)，您将React Component对象传递给jQuery。您应该首先检索DOM节点：

clickHandler: function (e) {
    $div = $(this.getDOMNode());
    var className = $div.attr('class');
    if (window.console) {
        console.log("className = "+className);
    } 
    e.stopPropagation();

}

当您将this.refs属性传递给其中一个元素时，也可以使用ref：

render: function () {
    return (
        <span ref="minusDecElem" className="minus_decrement inline_block" onClick={this.clickHandler} >&nbsp;-&nbsp;&nbsp;</span>     
    );
}

Answer 2

自己解决了问题。以下一行

var $div = $(this)

应替换为

var $div=$(e.target)

react.js -jquery方法不起作用

2 个答案: