Javascript 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>
        );
    }
});

var SelLines=新对象（）；
var Home=React.createClass({
handleClick:函数（e）{
console.log（“###单击##”）；
},  
render:function（）{
var tableRows=Data.map（函数（tableRow）{
console.log（tableRow）；
SelLines[tableRow.ID]=false；
控制台日志（SelLines）；
if（SelLines[tableRow.ID]）{
返回(
{tableRow.ID}
{tableRow.DESCRIPTION}
{tableRow.ACTION}
////是的，在家里
);
}否则{
返回(
{tableRow.ID}
{tableRow.DESCRIPTION}
{tableRow.ACTION}
);
}
});
返回(
ID
描述
行动
{tableRows}
);
}
});

如何将参数传递给handleClick？

调用函数时，您可以使用它来预先指定要调用的参数

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

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

---

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

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

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

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

this.handleClick（tableRow.ID）}>{tableRow.ACTION}

onClick={SelLines[tableRow.ID]=true；Home.handleClick}

相当于

{onClick:SelLines[tableRow.ID]=true；Home.handleClick}

。这就是无效的JavaScript。

{…}

只能包含表达式。您能修改格式吗？另外，您正在

map

函数中设置

SelLines[tableRow.ID]=false，这样它就永远不会达到
if true
条件。@PL我为您修复了格式设置。下次请发布格式良好的代码。当我在返回主页时调用它，但在返回tableRows时调用它时，这是有效的-我如何将它绑定到父项？由于它的格式，我错过了你的
map
函数。您需要绑定地图回调或使用箭头函数。
<a onClick={(e) => this.handleClick(tableRow.ID)}>{tableRow.ACTION}</a>