需要根据用户选择有条件地呈现具有 X 行数的部分

Question

我有一个反应组件，其中包含一个下拉菜单，其中包含none, 1, 5, and 13 的选项。

根据用户选择的数字，我需要呈现一个部分，其中包括具有字段名称和下拉列表的许多行。如果用户选择无，我需要整个附加配置部分消失。

新部分中的每个下拉菜单都将包含相同的选项集。每个字段名称都将包含它的编号，即

Configuration Dropdown #1

Configuration Dropdown #2

Configuration Dropdown #3

我正在尝试为初始选择下拉列表中的每个选项创建一个附加到 onChange 的函数，但我不确定从那里去哪里。

我包含了一个 CodeSandbox 以更好地表达我的意思。

Answer 1

查看我的codesandbox。

它并不完美，但我希望它有所帮助。

import React, { useState } from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import "antd/dist/antd.css";
import { Row, Col } from "antd";
import AntCollapse from "./CustomCollapse";

const Button = styled.button`
  color: white;
  background-color: #0076de;
  border-radius: 5px;
`;

const ConfigurationOptions = () => {
  const [configNumber, setConfigNumber] = useState(0);
  const [configList, setConfigList] = useState([]);

  const setConfig = number => {
    console.log(number);
    setConfigNumber(number);
    let newArray = new Array(parseInt(number, 10)).fill(0);
    console.log("newarray", newArray);
    setConfigList(newArray);
  };

  const setList = (number, index) => {
    setConfigList(prevState => {
      let newState = [...prevState];
      newState[index] = parseInt(number, 10);
      return newState;
    });
  };    

  return (
    <AntCollapse header="configuration test">
      <div>
        <h1>Section Header</h1>
        <Row>
          <Col span={4} offset={20}>
            <Button type="submit">Apply to All</Button>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <h3>Config Section #1</h3>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <p>How many do you need?</p>
          </Col>
          <Col span={4} offset={8}>
            <select
              value={configNumber}
              onChange={e => setConfig(e.target.value)}
            >
              <option value={0}>None</option>
              <option value={1}>1 Option</option>
              <option value={5}>5 Options</option>
              <option value={13}>13 Options</option>
            </select>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <h3>Conditional Config Section</h3>
          </Col>
        </Row>
        {configList.map((num, i) => (
          <Row key={i.toString()}>
            <Col span={12}>
              <p>Option Configuration Dropdown</p>
            </Col>
            <Col span={4} offset={8}>
              <select value={num} onChange={e => setList(e.target.value, i)}>
                <option value={0}>Default</option>
                <option value={1}>Add #1</option>
                <option value={2}>Add #2</option>
                <option value={3}>Add #3</option>
              </select>
            </Col>
          </Row>
        ))}
      </div>
    </AntCollapse>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<ConfigurationOptions />, rootElement);