Реагировать на избыточную форму, не создавая возвращаемое значение

Question

Я пытаюсь реализовать опцию выбора типа в форме редукса наряду с обычным типом ввода текста.

Работает нормально при обычном вводе. Однако, когда я попытался добавить option-select в форму, он не возвращает никакого значения.

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

Это потому, что я объявил CreateRenderer вне класса?

Когда я объявляю класс CreateRenderer внутри класса, он кричит мне, говоря, что не определено, даже если я объявил его в классе конструктора.

Любая идея, как я могу передать получить значение для отображения в компонентах рендерера?

 import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

const CreateRenderer = render => (field) => {
  const {
    meta: {
      touched,
      error,
      input,
      label,
      ...rest
    },
  } = field;

const className = `form-group ${touched && error ? 'has-danger' : ''}`
  return (
    <div className={className}>
      <label>{field.label}</label>
        {render(input, label, rest)}
      <label className="form-control-label" htmlFor="inputDanger1">
        {touched ? error : ''}
      </label>
    </div>
  );
}

class SignUp extends Component {
  onSubmit = (values) => {
    console.log(values);
  }

  renderInput = CreateRenderer((input, label) => {
    return (
      <input
        className="form-control"
        placeholder={label}
        {...input}
      />
    );
  })

  renderSelect = CreateRenderer((input, label, { children }) => {
    return (
      <select {...input}>{children}</select>
    );
  })


  render() {
    const { handleSubmit, submitting } = this.props;
    const genderArray = ['male', 'female'];
    return (
        <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
          <Field
            label="Fullname"
            name="fullname"
            type="text"
            component={this.renderInput}
          />

          <Field
            label="Email"
            name="email"
            type="text"
            component={this.renderInput}
          />

          <Field
            label="Birthday"
            name="birthday"
            type="date"
            component={this.renderInput}
          />

          <Field
            label="Password"
            name="password"
            type="password"
            component={this.renderInput}
          />

          <Field
            label="gender"
            name="sex"
            type="text"
            component={this.renderSelect}
          >
            {
              genderArray.map((gender) => {
                return (
                  <option key={gender} value={gender}>{gender}</option>
                );
              })
            }
          </Field>

          <button
            className="btn btn-outline-success my-2 my-sm-0"
            type="submit"
            disabled={submitting}
          >
            Submit
          </button>
          <button
            className="buttonSpace btn btn-outline-danger my-2 my-sm-0"
            type="submit"
            onClick={this.props.closeModal}
          >
            Cancel
          </button>
        </form>
    );
  }
}

const validate = (values) => {
  const errors = {};

  if (!values.fullname) {
    errors.fullname = 'Enter a fullname!';
  }

  if (!values.birthday) {
    errors.birthday = 'Enter a birthday!';
  }

  if (!values.email) {
    errors.email = 'Enter an email!';
  }

  if (!values.sex) {
    errors.sex = 'Enter an sex!';
  }

  if (!values.password) {
    errors.password = 'Enter a password!';
  }

  return errors;
};

SignUp.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  shouldCloseOnOverlayClick: PropTypes.bool.isRequired,
  handleSubmit: PropTypes.func.isRequired,
  submitting: PropTypes.bool.isRequired,
};

SignUp = connect(null, null)(SignUp);

export default reduxForm({
  validate,
  destroyOnUnmount: false,
  form: 'SignupForm',
})(SignUp);