仅突出显示在 React 中单击的 table 行

Question

我目前有一个 class 将状态数据的输出呈现为 table。但我希望能够根据每个状态数组具有的唯一 ID 突出显示行。

这是 table 内容的函数和渲染代码：

toggleActive(id) {
this.setState({
  rowIsActive: id,
});
if (rowIsActive === id) {
}
}

render() {
const EventsList = this.props.eventList.map((event) => {
  return scenario.list.map((event) => {
    return (
      <TableRow
        className="tr"
        key={event.id}
        handleClick={() => this.toggleActive(event.id)}
      >
        <Table.Td className="td">{event.name} </Table.Td>
        <Table.Td>
          <div>{event.location}</div>
          <div>{event.numberofpeople}</div>
          <div>{event.host ? event.host : null}</div>
          <div>{event.type ? pickevent.type : null}</div>
          <div>{event.style ? event.style : null}</div>
        </Table.Td>
        <Table.Td>{event.country}</Table.Td>
      </TableRow>
    );
  });
});
return <Fragment>{EventsList}</Fragment>;
  }
}

我将如何使用 React 或 CSS 来实现它？

Answer 1

如果您只需要突出显示一行，这个示例就可以工作

toggleActive(id) {
  this.setState({
     rowIsActive: id,
  });
}

render() {
  const EventsList = this.props.eventList.map((event) => {
    return scenario.list.map((event) => {
      return (
        <TableRow
          className={`tr ${this.state.rowIsActive === event.id ? 'active' : ''}`}
          key={event.id}
          handleClick={() => this.toggleActive(event.id)}
        >
          <Table.Td className="td">{event.name} </Table.Td>
          <Table.Td>
            <div>{event.location}</div>
            <div>{event.numberofpeople}</div>
            <div>{event.host ? event.host : null}</div>
            <div>{event.type ? pickevent.type : null}</div>
            <div>{event.style ? event.style : null}</div>
          </Table.Td>
          <Table.Td>{event.country}</Table.Td>
        </TableRow>
      );
    });
  });

  return <Fragment>{EventsList}</Fragment>;
}

Answer 2

TableRow 应具有基于 this.state.rowIsActive 的类名。

className={`tr${this.state.rowIsActive === event.id ? ‘ active’ : ‘’}`}

仅突出显示在 React 中单击的 table 行

Only highlight table rows that are clicked on in React

row

highlight

reactjs