Question

我有一个react组件，其中包含一个下拉列表，其选项包括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);

需要根据用户选择有条件地渲染具有X行数量的节

1 个答案: