Question

I am trying to create a CRUD application using react and mvc .net. 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>

        );
    }
});

Answer 1

您可以使用onClick来完成，就像这个

一样简单

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

注意：您也可以通过data-value传递，但仍然不是很好想法，在这种情况下，你仍然需要访问dom并通过它获取字段，而只是在可能的时候传递值。那会的简单，需要较少的处理。

Answer 2

您可以从点击处理程序中检索所需的数据，如下所示：

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

或者你可以把它放入它自己的功能中：

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

然后从您的编辑和删除功能中调用它：

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

Answer 3

您可以按照以下步骤进行操作。我在reactjs中使用javascript（ES-6）进行了相同的尝试，但是除了下面的内容之外，其他没有任何作用

<a href = 'www.google.com' 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.com'

如何传递来自<a> (anchor tag) to a function in react js?

3 个答案: