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

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处理程序，以便将n包含单击的元数据的对象<Chip>传递到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)
}