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

Question

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

这是我用来将表数据映射到td标签的功能。

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

在这里，我在render函数中调用了此函数。

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

Answer 1

您必须为每个td提供一个key ，然后是一个className属性，该属性将根据state当前存在的ID发生变化，当然还有一个onClick事件处理程序，该事件处理程序将使用单击的ID来填充状态，因此此代码块：

  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类可以按照您的喜好编写：

.highlighted-cell {
   background-color: blue;
   }