react.js -jquery method does not work

Question

The app uses node.js and react.js (namely react-async ). So there is a react component that has a click handler inside which I want to get the class names(namely minus_decrement and inline_block) of that component. I used jQuery inside node.js (details here) as well.

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>     

        );

    }

});

When I create the component with the following line

<MinusDecrement></MinusDecrement>

, console output shows undefined. I tried with .attr(className) and this.refs.minusDecElem.getDOMNode() after adding href to the span element but in vain. Both alternate codelines are mentioned in comments.

How to get the class name though jQuery then?

Why do you need to do this? Generally React is better without direct DOM manipulation. — Dan Abramov, Jan 08 '15 at 14:17

score 1 · Answer 1 · answered Jan 06 '15 at 20:14

By calling $(this) you are passing React Component object to jQuery. You should retrieve DOM Node first:

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

}

Also you can use this.refs when you pass ref property to one of elements:

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

your edit removed the comments from OP. rolled it back however. What is the problem with the way I used `href` (see comments in code)? Do I just need to wrap it with `$` ? — Istiaque Ahmed, Jan 06 '15 at 20:32

score 0 · Answer 2 · answered Jan 06 '15 at 20:13

0

Got the solution myself. The following line

var $div = $(this)

should be replaced with

var $div=$(e.target)

answered Jan 06 '15 at 20:13

Istiaque Ahmed

4,977
17
59
117

why? Why are you doing this though? You shouldn't be using jQuery here – zackify Jan 06 '15 at 20:20
@zackify, without jQuery how could I get the class name ? Do you opt for vanilla JS? – Istiaque Ahmed Jan 06 '15 at 20:34
set the classname to a state variable. Like `this.state.spanClass` then just modify that variable and the class will update. `this.state.spanClass` will always hold the current value. – zackify Jan 06 '15 at 22:01
2

It's pretty easy to get the class name without jQuery: `e.target.className`. – Felix Kling Jan 06 '15 at 22:26

react.js -jquery method does not work

2 Answers2