material-ui：从 onClick() 处理程序中的芯片组件获取标签

Question

-- Material-UI / React / Redux --

我有一个material-ui 表。在每个<TableRow> 内部都有一些<TableCell> 组件和它们自己的<Chip> 组件。这些<Chip> 组件通过label 属性呈现文本。

我需要能够提取onClick 处理程序中的标签，在我的例子中是chipFilter() 函数。

我将使用该标签来过滤我的 redux 状态并为渲染表格的较大组件返回新数据。

点击处理程序

chipFilter = () => {
     console.log(this)
     console.log(this.props)
     console.log(this.props.label)
}

组件渲染

表格中呈现的每一行：

<TableRow key={n.id}>    
    <TableCell 
        component="th" 
        align="center"
        scope="row">
        <Chip 
            label={n.procedure} 
            variant="outlined" 
            color="primary"
            clickable={true}
            onClick={this.chipFilter} />
    </TableCell>

    <TableCell align="center">
        <Chip 
            label={n.doctor} 
            variant="outlined" 
            color="primary"
            clickable={true}
            onClick={this.chipFilter} />
    </TableCell>
        .
        .
        .
</TableRow>

感谢您的帮助！

Answer 1

一个简单的解决方案是更新您的onClick 处理程序，以便将包含被点击的<Chip> 的元数据的n 对象传递给chipFilter()，如下所示：

<Chip label={n.procedure} variant="outlined" color="primary" clickable={true}
      onClick={ () => this.chipFilter(n) } />

然后更新chipFilter函数如下：

/* Item argument contains data for clicked chip component */
chipFilter = (item) => {
     console.log(this)
     console.log(item)
     console.log(item.label)
}