Реагировать: не получить значения полей

Question

У меня есть следующая реализация полей адреса.Это будет компонент многократного использования, который можно использовать с любыми формами для отображения полей адреса, таких как город, почтовый индекс и т. Д.

Теперь я могу просматривать поля адреса в любой форме, используя.

import Address from '../Address';// something

Но всякий раз, когда я отправляю форму, я не получаю значения этих полей в запросе из формы.Я только начал изучать React.Ниже приведен код.

import React, { Fragment, Component } from "react";
import { FormattedMessage, injectIntl } from "react-intl";
import {
  Input,
  Column,
  FormGroup,
  FormText,
  FormFeedback,
  Label
} from "@companyname/components";

class Address extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Fragment>
        <FormGroup row className="mt-3">
          <Label for="country" sm={2} className="input-is-required text-right">
            <FormattedMessage id="account.registration.form.label.country" />
          </Label>
          <Column sm={3}>
            <Input
              defaultValue={this.props.country}
              id="country"
              name="country"
              onChange={this.props.handleChange}
              required
              type="select"
              disabled={this.props.loading}
            >
              <option value="NL">Nederland</option>
              <option value="BE">Belgie</option>
            </Input>
          </Column>
        </FormGroup>
        <FormGroup row className="mt-3">
          <Label for="zipCode" sm={2} className="input-is-required text-right">
            <FormattedMessage id="account.registration.form.label.zipCode" />
          </Label>
          <Column sm={2}>
            <Input
              disabled={this.props.loading}
              id="zipCode"
              name="zipCode"
              onChange={this.props.handleChange}
              required
              type="text"
              value={this.props.zipCode}
            />
            <FormFeedback>
              <FormattedMessage id="account.registration.form.error.zipCode" />
            </FormFeedback>
          </Column>
          <Column sm={8}>
            <FormText className="col-form-label mt-0">
              <FormattedMessage id="account.registration.form.helptext.zipCode" />
            </FormText>
          </Column>
        </FormGroup>
        <FormGroup row className="mt-3">
          <Label
            for="houseNumber"
            sm={2}
            className="input-is-required text-right"
          >
            <FormattedMessage id="account.registration.form.label.houseNumber" />
          </Label>
          <Column sm={2}>
            <Input
              disabled={this.props.loading}
              id="houseNumber"
              name="houseNumber"
              onChange={this.props.handleChange}
              placeholder={this.props.intl.formatMessage({
                id: "account.registration.form.placeholder.houseNumber"
              })}
              required
              type="text"
              value={this.props.houseNumber}
            />
          </Column>
          <Column sm={2}>
            <Input
              disabled={this.props.loading}
              id="houseNumberAddition"
              name="houseNumberAddition"
              onChange={this.props.handleChange}
              placeholder={this.props.intl.formatMessage({
                id: "account.registration.form.placeholder.houseNumberAddition"
              })}
              type="text"
              value={this.props.houseNumberAddition}
            />
          </Column>
        </FormGroup>
        <FormGroup row className="mt-3">
          <Label for="street" sm={2} className="input-is-required text-right">
            <FormattedMessage id="account.registration.form.label.street" />
          </Label>
          <Column sm={4}>
            <Input
              disabled={this.props.loading}
              id="street"
              name="street"
              onChange={this.props.handleChange}
              required
              type="text"
              value={this.props.street}
            />
          </Column>
        </FormGroup>
        <FormGroup row className="mt-3">
          <Label for="city" sm={2} className="input-is-required text-right">
            <FormattedMessage id="account.registration.form.label.city" />
          </Label>
          <Column sm={4}>
            <Input
              disabled={this.props.loading}
              id="city"
              name="city"
              onChange={this.props.handleChange}
              required
              type="text"
              value={this.props.city}
            />
          </Column>
        </FormGroup>
      </Fragment>
    );
  }
}

export default injectIntl(Address);