React：将参数传递给地图中的函数

Question

我正在使用 MaterialDesign Table.

在 React 中构建一个显示用户数组的组件

每行由一个映射函数生成：

let actions = this.props.rowButtons;
...
{this.props.tableData.map( (val, index) => (
                       <TableRow key={index}>
                         <TableRowColumn >{index}</TableRowColumn>
                         <TableRowColumn >{val.firstName}</TableRowColumn>
                         <TableRowColumn >{val.lastName}</TableRowColumn>
                         <TableRowColumn >{val.email}</TableRowColumn>
                         <TableRowColumn >
                            <ActionButtons actions={actions}/>
                         </TableRowColumn>
                       </TableRow>
))}

<ActionButtons> 组件创建一个或多个按钮，并且作为参数采用对象数组，如 [{type: string, onClick: function}, {type: string, onClick: function}, ... ]（数组中每个对象一个按钮）；父组件在this.props.rowButtons中发送这样一个数组。

我想将 val 作为参数传递给每个 onClick 函数，以获得类似

的内容

actions = [{type: "personButton", onClick: onClick(val)}, {type: '', onclick: someOtherfunction(val)}];

Answer 1

您必须稍微修改一下 actions。尝试按照以下方式进行。

modifyActions = (actions, val) => {
  return actions.map((a) => {
      return Object.assign({}, a, {onClick: () => a.onClick(val)})
  })
}

<ActionButtons actions={this.modifyActions(actions, val)})}/>

React：将参数传递给地图中的函数

React: passing parameters to a function in map

javascript

parameters

reactjs

map-function