Я пытаюсь создать избыточную форму (используя избыточную форму), которая может динамически создавать свои собственные входные данные. У меня возникают проблемы с выяснением того, как сделать излишнюю форму осведомленной о новых полях, которые были созданы. Можно ли динамически изменять пропеллы полей, которые проходит в редукс-форме внутри самого компонента формы? Я думаю об этом неправильно? Вот с чем я работаю.

class AddCustomer extends Component {

 render() {

  class Form extends Component {

    constructor(props, context) {
      super(props, context)
      this.state = {
        inputsToAdd: []
      };
    }

    handleAddInput() {
       let inputsToAdd = this.state.inputsToAdd.slice();
       inputsToAdd.push(this.state.inputsToAdd.length);
       this.setState({ inputsToAdd });
    }

    submitForm(data) {
       console.log(data)
       this.setState({inputsToAdd: []});
       this.props.dispatch(initialize('addCustomer', {}))
    }

    render() {
      const { fields, handleSubmit } = this.props;
      return (
          <div>
            <form onSubmit={handleSubmit(this.submitForm.bind(this))}>
              <Input type='text' label='Company name' {...fields['companyName']}/>
              <Input type='email' label='Admin user email' {...fields['adminEmail']}/>
            </form>
            {this.state.inputsToAdd.map((element, index) => {
              return (
                <Input key={index} type='text' />
              )
            })}
            <Button onClick={() => this.handleAddInput()}>Add Input</Button>
            <Button onClick={handleSubmit(this.submitForm.bind(this))}>Submit</Button>
          </div>
        )
      }
    }

    Form = connectReduxForm({
      form: 'addCustomer',
      fields: ['companyName', 'adminEmail']
    })(Form);

    return (
      <div>
        <h1>Add Customer</h1>
        <Form />
      </div>
    )
  }
}