时间戳

首页 > 解决方案 > React/Redux：需要用 Redux 构建一个 React 组件，根据初始下拉选择动态生成额外的下拉列表

javascript - React/Redux：需要用 Redux 构建一个 React 组件，根据初始下拉选择动态生成额外的下拉列表

问题描述

我需要使用 Redux 操作和 reducer 构建一个 React 组件来处理下拉列表中的选择。类似于动作的东西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

标签： javascriptreactjsredux

解决方案

我认为你缺少的部分是Array.map()和onChange()方法。

  1. 您可以使用某种数据结构来存储选项的值，然后用于map动态构建 HTML。
  2. <CustomSelect>您可以通过定义处理用户进度的本地方法（即呈现哪些选择元素）来检测更改的值。

当然你必须定义onChoosingOptionand 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>

然后你可以在下一个级别使用几乎相同的东西。

推荐阅读