help_user/src/Address.tsx

import {Form, InputGroup} from "react-bootstrap";
import {AddressProps, OnChangeAddress} from "./entity";
import React from "react";

/**
 * 加载服务地点信息
 */
export class Address extends React.Component<OnChangeAddress, any>{


    constructor(props: Readonly<OnChangeAddress>) {
        super(props);

        this.state={
            addressList:[]
        }
    }

    componentDidMount() {
        this.loadAddress()
    }

    /**
     * 加载服务地点
     */
    loadAddress(){
        this.setState({
            addressList:[{
                address:"北京",
            },
                {
                    address:"广州",
                },
                {
                    address:"上海",
                }]
        })
    }

    render() {
        return (
            <InputGroup className="mt-3 col-3 ml-auto mr-auto">
                <InputGroup.Prepend>
                    <InputGroup.Text>服务地点</InputGroup.Text>
                </InputGroup.Prepend>
                <Form.Control as="select" custom onChange={(e)=>this.props.onChange(e.target.value)}>
                    <option value="">请选择服务地点</option>
                    {this.state.addressList.map((address:AddressProps, index:number)=>
                        <option key={"option"+index} value={address.address} >{address.address}</option>
                    )}
                </Form.Control>
            </InputGroup>
        )
    }
}