react.js - react, material-ui中如何识别是哪一个listitem被点击

问题描述

问 题

我在使用react.js以及material-ui的时候,试图给List里的ListItem添加touchTap事件, 回调方法中无法从event对象里获取到底是哪一个ListItem被点击了, 有什么解决方法吗?

// event handler
handleListItemCLick = e => {
        console.log(e);
}
configsToListItems = (configs) => {
        return this.listItems = configs.map((value, index) => {
            const listItem = <ListItem
                key={index}
                data={value}
                onTouchTap={this.handleListItemCLick}
                primaryText={value.remarks || 'unnamed'}
                secondaryText={value.server}
            />
            return listItem
        })
    }

我尝试过在listItem里添加data这个prop给ListItem. 但是event对象里无法识别出是哪一个ListItem被点击的. 上面的代码中有注释的函数就是事件处理器.
求大神给出姿势。

解决方案

感觉你这个需求的出发点就错了，你是想获取点击的 target，然后取到相应的 data、primaryText、secondaryText这些数据吧。
react 之类的前端 MVx 框架是数据驱动的，没必要去找点击的DOM。
你可以在 onTouchTap={this.handleListItemCLick} 这里调用方法时进行参数传递就行。
onTouchTap={this.handleListItemCLick.bind(this, value)}
handleListItemCLick 方法里的 e 就是 value。

这篇关于react.js - react, material-ui中如何识别是哪一个listitem被点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！