I am trying to create a CRUD application using react and mvc . On clicking the edit/delete link in the table, I want the corresponding EmpID to be passed to a function and then it should be passed to a controller, where edit/delete operation happens. Please let me know how to do this.

var EmployeeRow = React.createClass({

    Editnavigate: function(){

    },

    Deletenavigate: function(){

    },

    render: function () {
        return (
            <tr>
                <td>{this.props.item.EmployeeID}</td>
                <td>{this.props.item.FirstName}</td>
                <td>{this.props.item.LastName}</td>

                <td>
                    <a href="#" data-value="this.props.item.EmployeeID" onclick=this.Editnavigate>edit</a> | 
                    <a href="#" data-value="this.props.item.EmployeeID" onclick=this.Deletenavigate>delete</a>
                </td>               
            </tr>

        );
    }
});

I am trying to create a CRUD application using react and mvc . On clicking the edit/delete link in the table, I want the corresponding EmpID to be passed to a function and then it should be passed to a controller, where edit/delete operation happens. Please let me know how to do this.

var EmployeeRow = React.createClass({

    Editnavigate: function(){

    },

    Deletenavigate: function(){

    },

    render: function () {
        return (
            <tr>
                <td>{this.props.item.EmployeeID}</td>
                <td>{this.props.item.FirstName}</td>
                <td>{this.props.item.LastName}</td>

                <td>
                    <a href="#" data-value="this.props.item.EmployeeID" onclick=this.Editnavigate>edit</a> | 
                    <a href="#" data-value="this.props.item.EmployeeID" onclick=this.Deletenavigate>delete</a>
                </td>               
            </tr>

        );
    }
});

• javascript
• asp-mvc
• reactjs
• asp-web-api

Share Improve this question Follow edited Nov 20, 2017 at 6:03 Mark 11.1k66 gold badges3434 silver badges4848 bronze badges asked Nov 20, 2017 at 5:31 Praveen MohanPraveen Mohan 23111 gold badge66 silver badges1616 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can do it by using onClick, as simple as this

Editnavigate (e,id) {
    e.preventDefault();
    alert(id);
}

<a href="#" onClick={(e) => this.Editnavigate(e,1)}>edit</a> // pass your id inplace of 1

WORKING DEMO

Note : You can also pass via data-value , but still that's not good idea, in that case you still need to access dom and fetch via that field, instead that just pass the value when its possible. That will be simple and requires less processing.

You could retrieve the data you want from your click handlers like this:

EditNavigable: function(e) {
    var clickedLink = e.currentTarget;
    var data = clickedLink.getAttribute('data-value');
}

Or you could put it into it's own function like so:

getDataValue: function(e) {
    return e.currentTarget.getAttribute('data-value');
}

and then call it from your edit and delete functions like this:

EditNavigable: function(e) {
    var data = this.getDataValue(e);
} 

You can do it as below. I was trying the same in reactjs with javascript(ES-6), but nothing else worked except for below-

<a href = 'www.google.' onClick={clickHandler} > Google </a>

clickHandler(event){
  event.preventDefault();
  alert("This is alert: " + event.target.getAttribute('href'));
}

Here event.target.getAttribute('href') will return 'www.google.'