React / Redux: необходимо создать компонент React с Redux, который динамически генерирует дополнительные выпадающие списки на основе начального выпадающего списка.

Question

Мне нужно создать React Component с действием Redux и редуктором для обработки выбора из выпадающего списка.Нечто похожее на действие UPDATE_NUMBER_OF_DROPDOWNS, которое будет выступать в качестве прослушивателя в раскрывающемся списке для запуска потока действия / редуктора.Текущий макет будет одним выпадающим списком с набором параметров для 0, 1, 5 и 13, и в зависимости от того, какое число пользователь выберет, будет заполнено столько строк с собственными выпадающими полями.Поэтому, если пользователь выбирает 5, появится дополнительный раздел с 5 строками полей, называемых «Обоснование», каждое из которых имеет собственный выпадающий список со списком поднабора параметров.Я новичок в Redux, поэтому я пытаюсь определить, как это сделать, но я думаю, что мне нужно, я включил базовое состояние моего компонента React ниже Select Form Component

import React from 'react'
import styled from 'styled-components'
import { Col, Row, Collapse } from 'antd'
import Checkbox from '../elements/Checkbox'
import icon from '../../assets/caretDown.svg'
import Button from '../elements/Button'

const { Panel } = Collapse

const ConfigurationOptions = () => (
  <Container>
    <Row>
      <Col span={12}>
        <StyledCollapse>
          <Panel
            header="Configure Form"
            key="1"
          >
            <div>
              <Row>
                <Col span={12}>
                  <p>Form Fields</p>
                </Col>
                <Col span={12}>
                  <CustomSelect>
                    <option>none</option>
                    <option>5 Form Fields</option>
                    <option>10 Form Fields</option>
                    <option>13 Form Fields</option>
                  </CustomSelect>
                </Col>
              </Row>
              <div>
                <StyledH1>Form Field Justification</StyledH1>
                <Row>
                  <Col
                    span={8}
                    offset={16}
                  >
                    <ButtonContainer>
                      <Button
                        type="primary"
                        Apply to all
                      </Button>
                    </ButtonContainer>
                  </Col>
                </Row>
                <br />
                <Row>
                  <Col span={12}>Field #1</Col>
                  <Col span={12}>
                    <CustomSelect>
                      <option>Select Justification</option>

                    </CustomSelect>
                  </Col>
                </Row>
              </div>
            </div>
          </Panel>
        </StyledCollapse>
      </Col>
    </Row>
</Container>
)

const Container = styled.div`
  text-align: left;
`

const StyledH1 = styled.h1`
  font-weight: 700;
`

const CustomSelect = styled.select`
  padding: 5px 45px 5px 10px;
  font-size: 0.75rem;
  line-height: 1.4rem;
  font-weight: 500;
  color: black;
  border: 2px solid black;
  height: 30px;
  width: 75%;
  background-color: ${({ theme }) => theme.colors.white};
  border-radius: 0;
  appearance: none;
  background-image: url(${icon});
  background-repeat: no-repeat;
  background-position: right 8px center;
`

const ButtonContainer = styled.div`
  display: flex;
  align-items: baseline;
`

// Use for Show/Hide link
/* <Button type="link">APPLY TO ALL</Button> */

export default ConfigurationOptions

Answer 1

Я думаю, что недостающие части для вас - это методы Array.map() и onChange().

1. Вы можете использовать какую-то структуру данных для хранения значений ваших опций, а затем использовать map для динамического построения вашего HTML.
2. Вы можете обнаружить изменение значения <CustomSelect>, определив локальный метод, который обрабатывает прогресс пользователя (т. е. какой из элементов выбора отображается).

Конечно, вы должны определить onChoosingOption и this.state.value, но в конечном итоге это будет выглядеть примерно так:

const firstLevelOptions = [0, 5, 10, 13];

<CustomSelect onChange={this.onChoosingOption} value={this.state.value}>
  {
    firstLevelOptions.map(x => <option value={x}>
                                 {x === 0 ? 'none' : x + ' Form Fields'}
                               </option>)
  }
/*
Results in
  <option value="0">none</option>
  <option value="5">5 Form Fields</option>
  <option value="10">10 Form Fields</option>
  <option value="13">13 Form Fields</option>
*/
</CustomSelect>

И тогда вы сможете использовать почти то же самое на следующих уровнях.