[英]material-ui: Get label from Chip component inside onClick() handler
- - Material-UI / React / Redux - - - - Material-UI / 反应 / Redux - -
I have a material-ui
table.我有一张material-ui
表。 Inside each <TableRow>
there are some <TableCell>
components with their own <Chip>
components.在每个<TableRow>
内部都有一些<TableCell>
组件和它们自己的<Chip>
组件。 These <Chip>
components are rendering text through the label
property.这些<Chip>
组件通过label
属性呈现文本。
I need to be able to extract the label inside the onClick
handler, which in my case is the chipFilter()
function.我需要能够在onClick
处理程序中提取 label,在我的情况下是chipFilter()
function。
I am going to use that label to filter my redux state and return new data for the larger component rendering the table.我将使用 label 过滤我的 redux state 并返回新数据以用于渲染表格的较大组件。
Click Handler单击处理程序
chipFilter = () => {
console.log(this)
console.log(this.props)
console.log(this.props.label)
}
Component render组件渲染
Each row that is rendered in the table:表格中呈现的每一行:
<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>
Thanks for the help!!谢谢您的帮助!!
A simple solution would be to update your onClick
handler so that the n
object which contains the meta data of the clicked <Chip>
is passed through to chipFilter()
like so:一个简单的解决方案是更新您的onClick
处理程序,以便将包含单击的<Chip>
元数据的n
对象传递给chipFilter()
,如下所示:
<Chip label={n.procedure} variant="outlined" color="primary" clickable={true}
onClick={ () => this.chipFilter(n) } />
And then update the chipFilter
function as follows:然后更新chipFilter
函数如下:
/* Item argument contains data for clicked chip component */
chipFilter = (item) => {
console.log(this)
console.log(item)
console.log(item.label)
}
<Chip <芯片
clickable
label='label'
color="primary"
variant= 'filled'
onClick={(e) => console.log(e.target.innerText)}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.