javascript - 如何将值从 <a> ( anchor 标记)传递到 React js 中的函数？

Question

我正在尝试使用 React 和 mvc .net 创建一个 CRUD 应用程序。单击表中的编辑/删除链接时，我希望将相应的 EmpID 传递给函数，然后将其传递给 Controller ​​，在 Controller 中进行编辑/删除操作。请让我知道如何执行此操作。

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

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.