javascript - 反应：没有得到字段的值

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);