React - 带参数的同一类中的事件

我正在使用 Reactable 创建一个表。单击操作框时，我希望通过更改样式来显示一个包含有关该行的额外信息的框。 到目前为止，这是我的代码：

var SelLines  = new Object();
var Home = React.createClass({

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

    render: function() {    
        var tableRows = Data.map(function(tableRow) {
            console.log(tableRow);
            SelLines[tableRow.ID] = false;
            console.log(SelLines);
            if (SelLines[tableRow.ID]) {
                return (
                    <Tr>
                        <Td column="ID">{tableRow.ID}</Td>
                        <Td column="DESCRIPTION">{tableRow.DESCRIPTION}</Td>
                        <Td className="cellSelected" column="ACTION"><a onClick={SelLines[tableRow.ID] = true;Home.handleClick}>{tableRow.ACTION}</a></Td>
                         //// = true;Home.h ## not working
                    </Tr>
                );
            } else {
                return (
                    <Tr>
                        <Td column="ID">{tableRow.ID}</Td>
                        <Td column="DESCRIPTION">{tableRow.DESCRIPTION}</Td>
                        <Td className="cellNotSelected" column="ACTION"><a onClick={Home.handleClick}>{tableRow.ACTION}</a></Td>
                    </Tr>
                );
            }
        });
        return (
            <div>
                <div>
                    <Table className="table" id="table">
                        <Thead>
                            <Th column="ID">
                                <strong className="ID-header">ID</strong>
                            </Th>
                            <Th column="DESCRIPTION">
                                <em className="DESCRIPTION-header">DESCRIPTION</em>
                            </Th>
                            <Th column="ACTION">
                                <em className="ACTION-header">ACTION</em>
                            </Th>
                       </Thead>
                       {tableRows}
                   </Table>
                </div>
            </div>
        );
    }
});

如何将参数传递给handleClick？

您可以使用function.bind() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind在调用函数时添加要调用的参数。

<a onClick={this.handleClick.bind(this, tableRow.ID)}>{tableRow.ACTION}</a>

handleClick: function(tableRowId, e) {
    SelLines[tableRowId] = true;
    console.log("##Clicked##", tableRowId);
}

由于您正在渲染内部map()回调你还必须绑定回调：

var tableRows = Data.map(function(tableRow){
    // ...
}.bind(this));

或者，如果您使用 ES6，您可以编写箭头函数以避免需要bind:

var tableRows(Data.map((tableRow) => {
    // ...
});

您可以编写一个内联箭头函数作为处理程序，它使用一些参数调用另一个函数：

<a onClick={(e) => this.handleClick(tableRow.ID)}>{tableRow.ACTION}</a>