时间戳

首页 > 解决方案 > 做出反应。如何将 arg 传递给 onClick 调用的函数而不自动触发它

javascript - 做出反应。如何将 arg 传递给 onClick 调用的函数而不自动触发它

问题描述

我有这段代码。我面临的问题是缺少一个我想成为 id 的道具，在 map 函数中获得。由于我无法找到将 id 发送到地图外的组件的方法，我想我会这样做：

这是我的渲染功能

render() {
    var users = this.state.userList;


    const Table = Reactable.Table, 
          Td = Reactable.Td,
          Tr = Reactable.Tr;

    if (users.length === 0) {
        return <p>loading</p>
    }

    return (

        <div class="maincontainer">
            <div className="content-landing">

                <Table
                     className="table"
                     filterable={['Email']}
                     itemsPerPage={8}
                     currentPage={0}
                     sortable={true}
                >
                    {users.map((row) => {
                        return (

                            <Tr className={row.className}>
                                <Td column="Email">{row.email}</Td>
                                <Td column="Edit" ><FontAwesomeIcon className="editIcon" onClick={this.showModal(row.id)} icon={faEdit} /></Td> //----THIS.SHOWMODAL IS BEING AUTOEXECUTED WITHOUT ACCOUNTING FOR THE CLICKING


                            </Tr>

                        )
                    })}
                </Table>
                 <EditUserModal show={this.state.showModal} close={this.closeModal} row={this.state.rowId}/> //---I WANT THIS TO RECEIVE A row.id FROM THE ABOVE MAP


            </div>
        </div>



    )
}

我在想要进行更改的部分写了一些评论。我也想过把<EditUserModal>, 放在里面<Td>，但是由于它是一个外部npm模块，它崩溃了，它只承认文本。

所以我的解决方案是，将 row.id 传递给 showModal 函数，并尝试从那里设置一个状态。

showModal(rowId) {
    // console.log("showmodal state before any click")
    // console.log(this.state.showModal)
    console.log("triggered show modal")
    console.log(rowId)
    this.setState({
        showModal: true,
        rowId: rowId
    }, () => {
        // console.log("clicked show modal")
        // console.log(this.state.showModal)
    });

}

我认为它应该可以工作，但是由于该功能具有()，它会自动执行而无需等待任何点击，从而使我的应用程序崩溃。

标签： javascriptreactjs

解决方案

在您的代码中，您直接执行该函数：this.showModal(row.id).

您必须使用回调函数来传递row.id类似的内容：

onClick={()=> this.showModal(row.id)}

这应该可以解决您的问题。

推荐阅读