react js binding click event

Question

I'm new to reactjs, I have stuck in between please help me out here :

I have a class component in react js. And I have <ul></li></li></ul>, here I'm adding <li> from jquery after some DB query. Now how can I add onClick event to li ? bcz when I'm adding it from jquery i.e it's giving 'undefined function this.getValue' in react js.

Here is below example :

class getData extends React.Component {

    constructor(props) {
        super(props);
    }

    getValue(p1,p2,p3) {
        .... 
    }

    render() {

        var dropdown = <ul id="dropD"></ul>

        return (
            {dropdown}
        )
    }
}

Now from Jquery, I'm get li with some DB query and appending it to ul as below

<li onClick=this.getValue('x','xx','xxx')>value 1</li>
<li onClick=this.getValue('x','xx','xxx')>value 2</li>
<li onClick=this.getValue('x','xx','xxx')> ... </li>

Here I'm getting all the dropdown properly, but when I click on dropdown (li) tag, I'm getting as 'undefined this.getValue function' because I'm adding it dynamically. If I hard code the li under ul, it is able to recognize the function and is working properly, only issue when I add li dynamically.

Please let me know if I add li tag dynamically then how can I call onClick function inside class component

instead of adding onClick this that, add this: onClick={this.getValue.bind(this,'x','xx','xxx')}, it should work. — Mayank Shukla
– Mayank Shukla, Commented Apr 24, 2017 at 11:39
You're trying to refer to the class instance from outside of the class. Instead add those <li>s declaratively inside your React component class. — Asaf David
– Asaf David, Commented Apr 24, 2017 at 11:49
Hi Mayank, I'm adding onClick event from jquery itself. when I added your code I'm getting error as "Cannot read property 'bind' of undefined" — David
– David, Commented Apr 24, 2017 at 11:56
@AsafDavid, yes your right, but the class component has multiple loop functions. I cannot call ajax DB query each and every loop that's the reason I took out of react js and wanted to append from jquery with only 1 time ajax call. — David
– David, Commented Apr 24, 2017 at 11:59

jennas · Accepted Answer · 2017-04-25 04:07:23Z

1

Using jQuery to modify your react DOM tree is considered an anti-pattern and you should not do it. This is only going to cause you a world of pain when React attempts to compare against the virtual DOM. In fact, I'm surprised React is not warning you of this already.

What is the reason you do not want to add the new li children from within React itself?

Also, another thing is jumping out at me too, your component in this example is called getData. What is this component designed to do? It seems like a strange name to use.

If you are trying to populate a drop down I suggest you use componentDidMount to do your database call and update your view data on success.

example

class MySelectBox extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            items: ['Orange', 'Banana', 'Apple']
        };
    }

    componentDidMount() {
        window.$.ajax({
            url: "/api/getMyItem"
        }).done(function(result) {
            this.setState((state) => {
                state.items.push(result);
                return state;
            });
        });
    }

    handleClickEvent(e, value) {
        .... 
    }

    render() {
        return (
            <ul>
                {this.state.items.map((label) => {
                    return (
                        <li onClick={this.handleClickEvent.bind(this, label)}>
                            {label}
                        </li>
                    );
                })}
            </ul>
        );
    }
}

edited Apr 25, 2017 at 4:07

answered Apr 24, 2017 at 12:06

jennas

2,4542 gold badges25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Over a year ago

Hi Jeenas, thanks for your code. You have cleared my way where I was stuck from long time. But can you please explain me about ajaxMyItems.then((results) ? Instead of that can I add my normal ajax call i.e $.ajax({...}) and update the state ? . I tried by adding ajax call but didn't got the output so thought to bother you.

jennas Over a year ago

Hey @B77 I updated my answer to include a jQuery ajax example. I used window.$ as I assume you are importing a jQuery script in the HTML. If you are using webpack or browserify you should remove the window. bit and add import $ from 'jquery' at the top of your file. Also i know your starting out, but AJAX stuff should be moved into "actions" in conjunction with Flux or Redux.. but do that when you're more comfortable with this.

Collectives™ on Stack Overflow

react js binding click event

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related