如何将 <a> （锚标记）中的值传递给 react js 中的函数？答案

【问题标题】：How to pass a value from <a> (anchor tag) to a function in react js?如何将 <a> （锚标记）中的值传递给 react js 中的函数？
【发布时间】：2018-05-03 07:01:47
【问题描述】：

我正在尝试使用 react 和 mvc .net 创建一个 CRUD 应用程序。单击表中的编辑/删除链接时，我希望将相应的 EmpID 传递给一个函数，然后将它传递给一个控制器，在那里进行编辑/删除操作。请告诉我该怎么做。

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.net-mvc reactjs asp.net-web-api

【解决方案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 并通过它获取字段，而不是在可能的情况下传递值。那将简单且需要较少的处理。

【讨论】：

【解决方案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);
}

【讨论】：

【解决方案3】：

您可以按照以下方式进行。我用javascript（ES-6）在reactjs中尝试了同样的方法，但除了下面之外没有其他工作-

<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'

【讨论】：