Выделите только те строки таблицы, по которым щелкнули в React - PullRequest
Новая
       77

Выделите только те строки таблицы, по которым щелкнули в React

0 голосов
/ 04 апреля 2020

В настоящее время у меня есть класс, который выводит данные о состоянии в таблицу. Но я хочу иметь возможность выделять строки на основе уникального идентификатора, который есть у каждого массива состояний.

Вот функция и код визуализации для содержимого таблицы: 

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>;
  }
}

Как бы я go о реализации этого с использованием React или CSS?

Ответы [ 2 ]

0 голосов
/ 04 апреля 2020

TableRow должен иметь className на основе this.state.rowIsActive. 

className={`tr${this.state.rowIsActive === event.id ? ‘ active’ : ‘’}`}
0 голосов
/ 04 апреля 2020

Этот пример будет работать, если вам нужно выделить только одну строку 

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>;
}
...