使用React Hooks实现三列选择对话框

效果如下图所示：

 

import { FC, useState } from 'react';
import { Button } from 'antd-mobile';

export interface LocationCityType {
  cityId: string;
  cityName: string;
}

//城市列表
const activityCityList = [{
  cityId: "110100", cityName: "北京"
}, {
  cityId: "310100", cityName: "上海"
}, {
  cityId: "440100", cityName: "广州"
}, {
  cityId: "440300", cityName: "深圳"
}, {
  cityId: "410100", cityName: "郑州"
}, {
  cityId: "330100", cityName: "杭州"
}, {
  cityId: "510100", cityName: "成都"
},{
  cityId: "-1", cityName: "其他"
}];

const ChooseCityModal: FC<Props> = props => {
  const [selectCityObj, setSelectCityObj] = useState<LocationCityType>({
    cityId: '',
    cityName: '',
  }); // 选中的城市对象

    /* 点击某个城市选项 */
  const _clickOneCity = (e: any) => {
    const cityName = e.target.innerHTML;
    const cityObj = activityCityList.filter(item => {
      return item.cityName === cityName;
    });
    setSelectCityObj(cityObj[0]);
  };

    /* 点击确定按钮 */
  const _clickChooseCityOk = () => {
    console.log(`选中的城市为：${selectCityObj.cityName}`);
  };

    /* 点击随便看看按钮 */
  const _clickChooseCityCancel = () => {
   console.log('此处可执行关闭对话框的函数');
  };

  return (
    <div className='choose-city-box'>
      <div className='choose-city-content'>
        <div className='choose-city-form'>

          <div className='city-choose-part'>
            {activityCityList.length > 0 &&
              activityCityList.map((item: LocationCityType) => {
                return (
                  <div
                    key={item.cityId}
                    className={
                      item?.cityId === selectCityObj?.cityId
                        ? 'city-part city-part-select'
                        : 'city-part'
                    }
                    onClick={_clickOneCity}
                  >
                    {item.cityName}
                  </div>
                );
              })}
          </div>
        </div>

        <div className='button-part'>
          <Button
            className='close-modal-botton'
            onClick={_clickChooseCityCancel}
          >
            随便看看
          </Button>
          <Button className='submit-modal-button' onClick={_clickChooseCityOk}>
            确定
          </Button>
        </div>

      </div>
    </div>
  );
};
export default ChooseCityModal;

.choose-city-box {
	position: fixed;
	width: 100%;
	top: 0;
	bottom: 0;
	z-index: 100;
	background: rgba(0, 0, 0, .7);

	.choose-city-content {
		position: relative;
		background: #FFF;
		top: 142.5px;
		left: 37.5px;
		width: 300px;
		height: 324px;
		border-radius: 4px;

		.choose-city-form {
			padding: 24px 20px;
		}
	}
}

//display: grid实现多行多列布局，存在兼容问题，只兼容iOS10.3及以上版本
.city-choose-part {
	margin-top: 20px;
	display: grid;  
	grid-template-columns: repeat(auto-fill, 76px);
	grid-row-gap: 12px;
	grid-column-gap: 16px;

	.city-part {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 76px;
		height: 38px;
		border: .5px solid #D2D2D2;
		border-radius: 2px;
		font-size: 14px;
		color: #7C7D7E;
	}

	.city-part-select {
		border: .5px solid #FF6000;
		color: #FF4D00;
	}
}


 //display: flex实现多行多列布局，兼容性较好，ios都可以兼容
.city-choose-part {
  display: flex;  
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 20px;

  .city-part {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    margin-right: 16px;
    width: 76px;
    height: 38px;
    border: .5px solid #D2D2D2;
    border-radius: 2px;
    font-size: 14px;
    color: #7C7D7E;
  }

  .city-part-select {
    border: .5px solid #FF6000;
    color: #FF4D00;
  }
}

.city-choose-part .city-part:nth-of-type(3n) {
  margin-right: 0;
}



.button-part {
	position: absolute;
	left: 20px;
	bottom: 20px;
	height: 44px;

	.close-modal-botton {
		color: #7C7D7E;
		background: #FFF; 
	}

	.submit-modal-button {
		margin-left: 12px;
		color: #FFF;
		background: #FF6000;
	}

	.close-modal-botton,
	.submit-modal-button {
		height: 100%;
		width: 124px;
		font-size: 14px;
		border-radius: 2px;
	}

}