index.js

import React, { Component, Fragment } from 'react';
import { Row, Col, Card, Input, Select } from 'antd';

const Option = Select.Option;
export default class HttpPrefix extends Component {

  constructor(props) {
    super(props);
  }

  state = {
    prefix: null,
    value: ''
  }

  componentDidMount() {
    const linkUrl = this.props.value && this.props.value.split("://") || [];
    this.setState({
      prefix: linkUrl.length > 1 ? `${linkUrl[0]}://`: 'http://',
      value: linkUrl.length > 1 ? linkUrl[1]: linkUrl[0],
    });
  }

  changeValue = (value) => {
    this.setState({
      value,
    });
    this.props.onChange(this.state.prefix + value);
  }

  changePrefix = (prefix) => {
    this.setState({
      prefix,
    });
    this.props.onChange(prefix + this.state.value);
  }

  render() {
    const prefixSelector = <Select onChange={(value) => this.changePrefix(value)} style={{ width: 100 }} value={this.state.prefix}>
      <Option value="http://">http://</Option>
      <Option value="https://">https://</Option>
    </Select>
    return (
      <Input addonBefore={prefixSelector} onChange={(e)=> this.changeValue(e.target.value)} />
    )
  }
};