React-具有参数的同一类中的事件

React - Events in same class with parameters

本文关键字：一类 事件 参数 React-      更新时间：2023-10-08

我正在使用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()预先设置要调用的参数。

<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>
相关文章：