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

Question

我在使用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被点击的. 上面的代码中有注释的函数就是事件处理器.
求大神给出姿势。

Answer 1

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

Answer 2

推荐使用匿名函数的方式给 handleListItemCLick 传递一个参数(你点击这个ListItem时需要传递的那个参数，能懂我意思吧 ^_^)，然后通过map给每个ListItem都加上：

args = [arg1,arg2,arg3, ...];  // 你遍历时要传递的参数

// ... 其他代码省略

<ListItem onTouchTap={()=>this.handleListItemCLick(args[index])} />

如果你还需要使用句柄对象event，那把它写在最前面，新的参数加在后面：

<ListItem onTouchTap={(e)=>this.handleListItemCLick(e, args[index])} />

希望对你有帮助...

Answer 3

onTouchTap={this.handleListItemCLick.bind(this,index)},然后在handleListItemCLick方法中加个参数接受index的值。

Answer 4

楼上说的很好了，来晚了