如何选择和取消选择在Re​​act中使用地图功能创建的表格的动态创建列td，例如选择座位和取消选择

Question

我想选择和取消选择座位，例如电影院预订应用程序。我尝试过切换状态，但是单击另一个元素时状态会改变。如何为单个座位实施选择和取消选择功能？每次选择之后，我都会在另一张桌子上显示选择的座位。谢谢你的建议。 （对不起，我的英语不好）

  class SeatTable extends React.Component {
  state = {
    id: this.props.id,
    tickets: [],
    toggle: true,
    selectedTicketNo: []
  };

  componentDidMount() {
    this.props.getOneScreen(this.state.id);
  }

  renderTickets() {
    return this.props.tickets[0].row.map((seats, rowIndex) => {
      console.log(seats);

      return (
        <tr>
          <td>{seats.rowAlphabet}</td>
          {seats.seats.map(t => {
            if (t.reserved == false) {
              return (
                <td
                  onClick={event => {
                    this.selectTickets(event, t, rowIndex);
                  }}
                >
                  <i className="fas fa-chair" />
                </td>
              );
            } else {
              return (
                <td>
                  <i style={{ opacity: 0.2 }} className="fas fa-chair" />
                </td>
              );
            }
          })}
        </tr>
      );
    });
  }

  selectTickets(e, t, rowIndex) {
    e.target.style.color = "red";
    this.setState({
      tickets: this.state.tickets.concat(t._id),
      selectedTicketNo: this.state.selectedTicketNo.concat(
        `${this.props.tickets[0].row[rowIndex].rowAlphabet.toUpperCase()}${
          t.seatNumber
        }`
      )
    });
  }

  render() {
    if (this.props.tickets == null) {
      return <h1>Loading</h1>;
    }
    return (
      <div className="row">
        <div className="col-md-8">
          <table>
            <tbody>{this.renderTickets()}</tbody>
          </table>
        </div>
        <Reservation
          screenName={this.state.id}
          ticketNos={this.state.selectedTicketNo}
          selectedTickets={this.state.tickets}
        />
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    tickets: state.tickets
  };
};

export default connect(
  mapStateToProps,
  action
)(SeatTable);