javascript - react /Redux : Need to build a React component with Redux that dynamically generates additional dropdowns based on initial dropdown selection

Question

我需要构建一个带有 Redux 操作和化简器的 React 组件来处理下拉列表中的选择。类似于操作 UPDATE_NUMBER_OF_DROPDOWNS 的内容，它将充当下拉列表上的监听器以触发操作/ reducer 流。当前布局将是一个带有一组 0、1​​、5 和 13 选项的单个下拉列表，并且根据用户选择的数字，将填充具有自己的下拉字段的许多行。因此，如果用户选择 5，下面将出现一个附加部分，其中包含 5 行名为“理由”的字段，每个字段都有自己的下拉列表，其中列出了选项的子集。我是 Redux 新手，所以我正在尝试确定如何实现这一目标，但我认为我需要在下面包含我的 React 组件的基本状态 选择表单组件

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>

然后你就可以在接下来的关卡中使用几乎相同的东西。