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

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

您必须为每个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;
   }