React - call handler from var in render function

P L

I am trying to call an event handler from a child class that is integrated in its parent, but the handler is not being called and I also don't get any error messages.

var Home = React.createClass({

        handleClick: function(tableRowId, e) {
            console.log("##Clicked##", tableRowId);
        }

        render : function () {
            var tableRows = Data.map(function (tableRow) {

                    if (SelLines[tableRow.ID]) {
                        return (
                             <Tr>
                            // ...
                             <Td className = "cellSelected" column = "ACTION">  
                             // ## This doesnt call the handler
                             <a onClick = {this.handleClick.bind(this, tableRow.ID)}> {tableRow.ACTION} </ a>  <  / Td >

                             <  / Tr > )
                    } else {
                        return (
                            //...
                    };
                });
            return (
                 < div >
                 < div >
                 // ## This does work and call the handler
                 <a onClick={this.handleClick.bind(this, 1234)}> Test </a>
                 < Table className = "table" id = "table" >
                     {tableRows}
                 <  / Table >
                 <  / div >
                 <  / div > );

        }
    });
Phi Nguyen

The problem is that the this in Data.map doesn't refer to the React component. You need to bind this of React component to the callback of the Data.map function as well.

UPDATE : because it's difficult to perform the binding 2 levels. This is a simple way to get the this of React component.

render : function(){
  var that = this;
  ...Data.map(function(){ that.handle...})
   ....
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

react call a function from ReactDOM.render

From Dev

React call component's method from nested function in render method

From Java

How to Call a Function inside a Render in React/Jsx

From Dev

React.js call recursive function in render

From Dev

React Native call a function in a render method

From Dev

Jquery call var from another function

From Dev

Jquery call var from another function

From Dev

Pass function from props to render function in react

From Dev

Backbone.js calling function render from event handler

From Dev

How to get a var/const from render in React-Native

From Dev

React with Typescript: Render components from `map` function

From Dev

Get value from firebase and render it to render function in react

From Dev

How to render component from a function outside the render method in React?

From Dev

Is it possible to call a block completion handler from another function in iOS?

From Dev

How to call public function from event handler in JavaScript?

From Dev

Call function from render method one time (libGDX)

From Dev

call var in function to outside the function

From Dev

How to call a function in the render function?

From Dev

How to call a function in the render function?

From Dev

Call function as a route-handler?

From Dev

Not able to access react state from socket event handler function

From Dev

Call external Javascript function from react components

From Dev

Call React Component Function from onclick in dangerouslySetInnerHTML

From Dev

how to call a function from another component in react

From Dev

Render Content Dynamically from an array map function in React Native

From Dev

Pass the value of a props from a function to render() in React.JS

From Dev

Call normal javascript function from another document in a react component function

From Dev

React/Flux: Firing an action from a render method of an component or doing a Rest call from a component?

From Dev

How does React call the render function of an ES6 class in a such a way that `this` does not refer to the class itself?

Related Related

  1. 1

    react call a function from ReactDOM.render

  2. 2

    React call component's method from nested function in render method

  3. 3

    How to Call a Function inside a Render in React/Jsx

  4. 4

    React.js call recursive function in render

  5. 5

    React Native call a function in a render method

  6. 6

    Jquery call var from another function

  7. 7

    Jquery call var from another function

  8. 8

    Pass function from props to render function in react

  9. 9

    Backbone.js calling function render from event handler

  10. 10

    How to get a var/const from render in React-Native

  11. 11

    React with Typescript: Render components from `map` function

  12. 12

    Get value from firebase and render it to render function in react

  13. 13

    How to render component from a function outside the render method in React?

  14. 14

    Is it possible to call a block completion handler from another function in iOS?

  15. 15

    How to call public function from event handler in JavaScript?

  16. 16

    Call function from render method one time (libGDX)

  17. 17

    call var in function to outside the function

  18. 18

    How to call a function in the render function?

  19. 19

    How to call a function in the render function?

  20. 20

    Call function as a route-handler?

  21. 21

    Not able to access react state from socket event handler function

  22. 22

    Call external Javascript function from react components

  23. 23

    Call React Component Function from onclick in dangerouslySetInnerHTML

  24. 24

    how to call a function from another component in react

  25. 25

    Render Content Dynamically from an array map function in React Native

  26. 26

    Pass the value of a props from a function to render() in React.JS

  27. 27

    Call normal javascript function from another document in a react component function

  28. 28

    React/Flux: Firing an action from a render method of an component or doing a Rest call from a component?

  29. 29

    How does React call the render function of an ES6 class in a such a way that `this` does not refer to the class itself?

HotTag

Archive