javascript - 不使用jquery在click中获取bootstrap表的行索引

标签 javascript reactjs bootstrap-table react-bootstrap-table

我的 react 项目中有一个引导表。我想获取我点击的行的索引。我想做这样的事情 onclick = {this.handleClick} 并在handleClick 函数中我想获取行的索引。是否可以做到呢。大多数可用的解决方案都显示了使用 jquery 的所有内容,但我不想使用 Jquery。我想只使用 javascript 来完成它。这是我的 table

<Table className='flags-table' responsive hover>
                                    <thead>
                                        <tr>
                                            <th> </th>
                                            <th> Time In </th>
                                            <th> Time Out </th>
                                            <th> Type </th>
                                            <th> Category </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {
                                            FLAGS_LIST.map((x,i)=> (
                                                <tr key={i}>
                                                    <td> <div className='red-box'></div> </td>
                                                    <td> {x.time_in} </td>
                                                    <td> {x.time_out} </td>
                                                    <td> {x.type} </td>
                                                    <td> {x.category} </td>
                                                </tr>
                                            ))  
                                        }
                                    </tbody>
                                </Table>

最佳答案

您可以使用这样的代码:

onclick = {this.handleClick.bind(this, i)}; 

handleClick应该这样声明:

var handleClick = function(i) {
console.log("key of row", i)
...
};

关于javascript - 不使用jquery在click中获取bootstrap表的行索引,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41890376/

相关文章:

javascript - 将 Redux Saga 与 React 结合使用时出现此错误 .. Uncaught TypeError : getPosts is not a function

javascript - 如何在 Next.js 中使用 redux 获取数据

javascript - Bootstrap-Table 插件,按初始搜索值过滤

javascript - Bootstrap 表 "item per page"下拉列表不工作

javascript - ReactJS:比较 shouldComponentUpdate 上的 Prop 和状态

jquery - 更改 Bootstrap 表单元格中复选框的大小

javascript - Ajax 调用以消耗本地主机上的剩余服务

javascript - Angular 1.6 - 当数组中的元素是另一个对象中的键时的 ng-if

javascript - Firefox 不接受输入类型数字小数

javascript - map() 返回不在 react 组件中呈现