如何使用自定义react组件作为地理编码器输入框？

import React, { Component } from 'react';

class GeocoderInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
      address: '',
      geocodeResult: null
    };
  }

  handleInputChange = (event) => {
    this.setState({ address: event.target.value });
  }

  handleGeocode = () => {
    // 调用地理编码API进行地址转换
    // 请替换为腾讯云地图服务的API调用代码
    // 示例代码仅供参考
    const address = this.state.address;
    const geocoder = new window.qq.maps.Geocoder();
    geocoder.getLocation(address, (result) => {
      this.setState({ geocodeResult: result });
    });
  }

  render() {
    const { geocodeResult } = this.state;

    return (
      <div>
        <input type="text" value={this.state.address} onChange={this.handleInputChange} />
        <button onClick={this.handleGeocode}>地理编码</button>
        {geocodeResult && (
          <div>
            <p>经度：{geocodeResult.location.lng}</p>
            <p>纬度：{geocodeResult.location.lat}</p>
          </div>
        )}
      </div>
    );
  }
}

export default GeocoderInput;