时间戳

首页 > 解决方案 > 如何将参数传递给函数然后在函数中使用它？

javascript - 如何将参数传递给函数然后在函数中使用它？

问题描述

我创建了一个可重用的表格组件，我将 (headerArray, dataArrayObject, addEditButton ) 作为来自父组件的道具传递。

使用下面编写的代码可以很好地创建表。

const Table = ({tableData,headingColumns,addEditButton}) => {
    const onEditHandler = (rowDetail) =>{
        console.log(rowDetail);
        console.log("clicked");
    }  
    const data = tableData.map((row,index) =>{
        let rowData = [];
        let i = 0;
        for(const key in row){
           rowData.push({
              key:headingColumns[i],
              val:row[key] 
           }) 
           i++;
        }
        return <tr key = {index}>
            {rowData.map((data,index) =>
            <td key = {index} data-heading = {data.key}>{data.val}</td>)}
            {addEditButton && 
            <td>
                <button className = "btn btn-outline-dark btn-sm" 
      onClick ={(row)=>onEditHandler(row)}>
      <EditIcon color="secondary"/>
      </button>
            </td>}       
        </tr>
    })
    return (
        <div className = "table-container">            
            <table
       className = {tableClass} 
      style = {{backgroundColor :"rgba(0,0,0,0.4)",fontSize : "12px"}}>
                <thead>
                    <tr>
                        {headingColumns.map((col,index)=>(
                            <th key = {index}>{col}</th> 
                        ))}
                    </tr>
                </thead>
                <tbody>
                    {data}
                </tbody>
            </table>
        </div>
    )
}

但是，问题出在 onEditHandler 上，我想将特定的数据作为参数传递给 onClick 函数，我在函数上调用该函数我没有收到我期望对象的数据，而是接收 SyntheticBaseEvent 作为参数值通过了。 在此处输入图像描述 .

虽然我的功能工作正常，但我也得到了我在功能中提到的 Clicked 控制台。

标签： javascriptreactjs

解决方案

你需要一个像这样的高阶函数：

const onEditHandler = rowDetail => nativeEvent => {
    console.log(rowDetail);
    console.log(nativeEvent);
}

然后在 JSX 中：

onClick={onEditHandler(row)}

其他解决方案：只是不要给回调参数命名，以便row引用row您所期望的：

onClick={() => onEditHandler(row)}

推荐阅读