如何使用切换功能交换所选值?

问题描述 投票:0回答:1
是一个旅行社的项目,我在其中展示机场名称和城市,我想使用TOOGLE功能交换/交换机场和城市。

这里是图片:

toogle functionality

在这里是代码:

<div style={{position:'relative'}} className='col-lg-6'> <span className='switch_destination'><Link onClick={toogleDestination} to=''> <PiArrowsLeftRight/></Link></span> <div className='row g-0'> <div className='col-lg-6'> <AirportContainer Source={'From'} icon={ <svg xmlns="http://www.w3.org/2000/svg" width="27" viewBox="0 0 640 512" > <path d="M381 114.9L186.1 41.8c-16.7-6.2-35.2-5.3-51.1 2.7L89.1 67.4C78 73 77.2 88.5 87.6 95.2l146.9 94.5L136 240 77.8 214.1c-8.7-3.9-18.8-3.7-27.3 .6L18.3 230.8c-9.3 4.7-11.8 16.8-5 24.7l73.1 85.3c6.1 7.1 15 11.2 24.3 11.2H248.4c5 0 9.9-1.2 14.3-3.4L535.6 212.2c46.5-23.3 82.5-63.3 100.8-112C645.9 75 627.2 48 600.2 48H542.8c-20.2 0-40.2 4.8-58.2 14L381 114.9zM0 480c0 17.7 14.3 32 32 32H608c17.7 0 32-14.3 32-32s-14.3-32-32-32H32c-17.7 0-32 14.3-32 32z" /> </svg> } onAirportSelect={handleAirportSelectFrom} airportPayload={ searchPayload?.segments && searchPayload?.segments[0].origin } /> </div> <div className='col-lg-6'> <AirportContainer Source={'To'} icon={ <svg xmlns="http://www.w3.org/2000/svg" width="27" viewBox="0 0 640 512" > <path d="M381 114.9L186.1 41.8c-16.7-6.2-35.2-5.3-51.1 2.7L89.1 67.4C78 73 77.2 88.5 87.6 95.2l146.9 94.5L136 240 77.8 214.1c-8.7-3.9-18.8-3.7-27.3 .6L18.3 230.8c-9.3 4.7-11.8 16.8-5 24.7l73.1 85.3c6.1 7.1 15 11.2 24.3 11.2H248.4c5 0 9.9-1.2 14.3-3.4L535.6 212.2c46.5-23.3 82.5-63.3 100.8-112C645.9 75 627.2 48 600.2 48H542.8c-20.2 0-40.2 4.8-58.2 14L381 114.9zM0 480c0 17.7 14.3 32 32 32H608c17.7 0 32-14.3 32-32s-14.3-32-32-32H32c-17.7 0-32 14.3-32 32z" /> </svg> } onAirportSelect={handleAirportSelectTo} airportPayload={ searchPayload?.segments && searchPayload?.segments[0].destination } /> </div> </div> </div> </div>

	
javascript reactjs arrays typescript
1个回答
0
投票
	
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.