javascript - how i can map and set index 0 to true and the others to false onclick react JS

Question

How I can map and set index 0 to true and the others to false onclick react js this map function show the details of all tickets , the idea is when user click button show the details of each ticket , how I can return the buttons according to number of tickets then on click show one single ticket detail so how I can do that any suggestions or solutions please

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

标签： javascriptreactjs

Answer 1

React 有各种关于npmjs的综合解决方案，包括我相信你所要求的，称为 Accordion。手风琴是可折叠的单选部分。

有多种 npm 解决方案，包括react-accessible-accordion（默认为手风琴）和rc-collapse（必须设置手风琴）。

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