如何映射并将索引0设置为true，将其他索引设置为false onclick react JS

Question

我如何可以映射和设置索引0为true和其他为false onClick反应js这个地图功能显示所有门票的详细信息，这个想法是当用户单击按钮显示每张门票的详细信息时，我如何根据门票的数量返回按钮，然后点击显示一张门票详细信息，我如何做到这一点，请提供任何建议或解决方案

state = {
  result: [],
  success: 'success',
  show: false,
};

ltenaryHandler = () => {
  this.setState({
    show: !this.state.show
  });
};

render() {
    const arabic = this.props.intl.locale === 'ar';
    const result = this.state.result.map((results, i) => {
      const departureDateApi = results.flight.travelSegment[0].departureDate;
      const DepartureDate = moment(departureDateApi).format('DD/MM/YYYY');
      const tripSegmentDuration = results.flight.travelSegment[0].arrivalTime;
      const newTripSegmentDuration = moment(tripSegmentDuration).format('HH:mm:ss');
      const DateOfFlight = results.flight.travelSegment[0].departureTime;
      const DateOfFlightMomented = moment(DateOfFlight)
        .add(0, 'hours')
        .format('LLL');

      return ( <
        div key = {
          results.id
        }
        className = {
          'container'
        } >
        <
        TogglePlus onClick = {
          () => this.ltenaryHandler(i)
        } > {
          this.state.show && ( <
            div className = {
              'ltenaryHandler'
            } >
            <
            BookingConfirmation / >
            <
            Header display = {
              this.props.display
            }
            test = {
              i + 1
            }
            /> <
            DepartureInfo key = {
              results
            }
            display = {
              this.props.display
            }
            airportDeparture = {
              results.flight.travelSegment[0].departureAirport === ' ' ?
              `${results.flight.travelSegment[0].departureAirport}` :
                `${results.flight.travelSegment[0].departureAirport} `.replace(/ /, ' - ')
            }
            departure = {
              DepartureDate
            }
            segmentTripDuration = {
              newTripSegmentDuration
            }
            /> <
            FlightDetail / >
            <
            FlightInside alt = {
              'Logo Company'
            }
            flightNumberPass = {
              results.flight.travelSegment[0].aircraftName
            }
            PNR = {
              results.flight.travelSegment[0].airlinePnr
            }
            FlightOperator = {
              results.flight.travelSegment[0].airlineName
            }
            departureCountry = {
              results.flight.travelSegment[0].departureAirport
            }
            ArrivalCountry = {
              results.flight.travelSegment[0].arrivalAirport
            }
            DateOfFlight = {
              DateOfFlightMomented
            }
            airport = {
              results.flight.travelSegment[0].departureAirport
            }
            arrivalAirport = {
              results.flight.travelSegment[0].arrivalAirport
            }
            terminal = {
              results.flight.travelSegment[0].departureTerminal
            }
            arrivalTerminal = {
              results.flight.travelSegment[0].arrivalTerminal
            }
            /> <
            FlightAmenities / >
            <
            Wrapper arabic = {
              arabic
            }
            padding = {
              '5px 10px'
            }
            background = {
              '#d3d3d4'
            } >
            <
            Desc > {
              `${this.props.intl.formatMessage({
                        id: 'Transit_Airport',
                      })} `
            } < /Desc> <
            /Wrapper> <
            FlightDetail / >
            <
            FlightInside alt = {
              'Logo Company'
            }
            flightNumberPass = {
              results.flight.travelSegment[0].aircraftName
            }
            PNR = {
              results.flight.travelSegment[0].airlinePnr
            }
            FlightOperator = {
              results.flight.travelSegment[0].airlineName
            }
            departureCountry = {
              results.flight.travelSegment[0].departureAirport
            }
            ArrivalCountry = {
              results.flight.travelSegment[0].arrivalAirport
            }
            DateOfFlight = {
              DateOfFlightMomented
            }
            airport = {
              results.flight.travelSegment[0].departureAirport
            }
            arrivalAirport = {
              results.flight.travelSegment[0].arrivalAirport
            }
            terminal = {
              results.flight.travelSegment[0].departureTerminal
            }
            arrivalTerminal = {
              results.flight.travelSegment[0].arrivalTerminal
            }
            /> <
            FlightAmenities / >
            <
            /div>
          )
        } <
        /TogglePlus> <
        /div>
      );
    });

Answer 1

React有多种关于NPMJ的全面解决方案，包括我认为你想要的，叫做手风琴。手风琴是一个单一的选择部分的可折叠。

有各种各样的npm解决方案，包括react-可访问的手风琴，其中手风琴是默认的，以及rc-折叠，其中手风琴必须设置。

或者，不使用节点模块，您的问题已经在stackoverflow的另一个问题中得到了回答。