Как получить доступ и использовать значение из дочернего компонента в redux-форме, чтобы заставить флажок работать и включить условно отображаемые дополнительные параметры

Question

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

Я могу сделать это для родительского файла (в разделе «Тип SOW») с помощью «formValueSelector» (см. «Песочницу»: https://codesandbox.io/s/currying-cloud-isu8c), но с третьим вариантом в этом разделе («Пользовательские профессиональные услуги»). SOW ') при нажатии на флажок мне нужно дополнительно отредактировать некоторые опции при нажатии на новый флажок, который выставлен внутри (' Customized Professional Services ').

Файл, содержащий код для дочернего компонента, - «CustomProfExtOptions». Какой код мне нужен в этом дочернем компоненте и / или родительском компоненте, чтобы этот вложенный флажок работал / включал условный рендеринг при установке флажка

Я понимаю, что мне нужно получить доступ к значению поля в этом дочернем компоненте формы, чтобы манипулировать его состоянием (mapStateToProps?) И позволить условному рендерингу работать. Я успешно сделал это в родительском (как показывает песочница), но я не знаю, как заставить его работать в дочернем компоненте.

Я активно гуглял по этому вопросу в течение трех дней и пытался настроить другие примеры, которые я нашел, чтобы соответствовать этой конкретной проблеме (серый текст в нижней части «CustomProfExtOptions.js», где содержится код дочернего компонента), но я еще не нашел ничего, что работает.

Что работает до сих пор:

Код 'formValueSelector' (согласно документам Redux-Form, который позволяет получить доступ к значениям в полях формы), который я использую в родительском контейнере для формы (файл с именем PdfGenFormContainerRedux.js) следующим образом:

PdfGenFormContainerRedux = reduxForm({
  form: "StatementOfWorkApplication"
})(PdfGenFormContainerRedux);

const selector = formValueSelector("StatementOfWorkApplication");
PdfGenFormContainerRedux = connect((state) => {
  const hasProductSowValue = selector(state, "productSOW");
  const hasTeradataExtOptionsValue = selector(state, "teradata");
  const hasCustomProfExtOptions = selector(state, "customExtOptions"); //selector created

  return {
    hasProductSowValue,
    hasTeradataExtOptionsValue,
    hasCustomProfExtOptions
  };
})(PdfGenFormContainerRedux);

export default PdfGenFormContainerRedux;

Это позволяет мне условно визуализировать второе скрытое поле по щелчку флажка, используя переменную с именем props.hasCustomProfExtOptions , как показано ниже:

<div className="checkbox-group">
        <div>
          <label className="checkbox-group">
            <Field
              name="customExtOptions"
              className="form-checkbox"
              component="input"
              type="checkbox"
            />
            Custom Professional Services SOW
            {props.hasCustomProfExtOptions && ( //conditional rendering bit here
              <div>
                <Field
                  name="custProfServices"
                  type="input"
                  component={CustomProfExtOptions}
                  label="Custom Options Info"
                  placeholder="Location"
                  formId={formId}
                  /* hasProfServ={props.hasProfServ} */
                />
              </div>
            )}
          </label>
        </div>
      </div>
    </div>

Это прекрасно работает на родительском контейнере, но как мне заставить его работать с флажком «Customized Professional Services» в дочернем компоненте? (файл с именем «CustomProfExtOptions»)

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

Любая помощь будет принята с благодарностью