Question

如何在单击时突出显示表格中的行？我尝试过使用onClick函数但我无法实现它。

这是我用来将表数据映射到td标记的函数。

displayData() {   
       let x;
       if (this.props.data) {
       x = this.props.data.map(item => (
       <tr>
       <td> {item.height} </td>
       </tr>
      ));
    }
    return x;
    }

这里我在渲染函数中调用了这个函数。

        <Table id="tableId" >
        <thead>
        <tr>
        <th> height </th>
       </tr>
      </thead>
     <tbody> {this.displayData()} </tbody>
     </Table>

Answer 1

您必须为每个key提供一个td，然后根据className中当前存在的ID更改一个state属性，当然还有{ {1}}事件处理程序将使用单击的id填充状态，因此该块：

onClick

并且您的if (this.props.data) { x = this.props.data.map((item,key) => ( <tr> <td key={key} onClick={this.handleCellClick(key)} className={`${this.state.checkedId===key? 'highlighted-cell': ''}`} > {item.height} </td> </tr> )); }函数可以按如下方式实现：

handleCellClick

最后，您的handleCellClick = (key) => (event) => { if(this.state.checkedId===key){ this.setState({ checkedId: '', }); }else{ this.setState({ checkedId: key, }); } }课程可以根据您的偏好编写：

highlited-cell

单击行时，在引导程序样式表中选择一行

1 个答案: