根据反应中另一个下拉列表的值创建动态下拉列表行答案

【问题标题】：Create rows of dynamic dropdowns based on value of another dropdown in react根据反应中另一个下拉列表的值创建动态下拉列表行
【发布时间】：2020-07-17 08:19:46
【问题描述】：

我正在使用 react-select 并且我想创建 n 行，每行两个下拉列表，这样一个下拉列表中的选项取决于在同一行的另一个下拉列表中选择的值。假设我有以下值：

options = ['A', 'B', 'C', 'D']
sub_options = { 'A' : [1,2,3],
                'B' : [4,5,6],
                'C' : [7,8,9],
                'D' : [10,11,12] }

例如。当我在第一个下拉菜单中选择选项A 时，第二个下拉菜单有选项1,2,3。

可以有 n 行。我希望我的问题是可以理解的。谢谢。

【问题讨论】：

标签： javascript arrays reactjs react-select

【解决方案1】：

这里是 stackblitz： https://stackblitz.com/edit/react-pnjq1t

    constructor() {
      super();
      this.state = {
        options: ["A", "B", "C", "D"],
        sub_options: {
          A: [1, 2, 3],
          B: [4, 5, 6],
          C: [7, 8, 9],
          D: [10, 11, 12]
        },
        selectedSubOptions: []
      };
  }

  onOptionChange = e => {
    this.setState({
      selectedSubOptions: this.state.sub_options[event.target.value]
    });    
  };

  render() {
    return (
      <div>
        Options:
        <select onChange={this.onOptionChange}>
          <option value="">Please select</option>
          {this.state.options.map(item => (
            <option value={item} key={item}>
              {item}
            </option>
          ))}
        </select>
        <br />
        Sub Options:
        <select>
          <option value="">Please select</option>
          {this.state.selectedSubOptions.map(item => (
            <option value={item} key={item}>
              {item}
            </option>
          ))}
        </select>
      </div>
    );
  }

【讨论】：

我知道它有两个下拉菜单。如果我需要多个下拉菜单怎么办？我的意思是现在它有一排两个下拉菜单。如果我想要大约 5 行（可以是可变数量）这样的下拉列表怎么办。那我该如何构建我的代码呢？
@Crazzay1903 多个下拉菜单或带有 2 个下拉菜单的多行。确保您需要什么。
多行，有 2 个下拉菜单。对不起，如果我不清楚
@Crazzay1903 参考相同的 stackblitz 链接。我已经修改了那里的答案。您可以创建 n 行。只需修改数组长度。您也可以使用您传递的数字。对于传递一个数字，创建一个虚拟数组并对其进行迭代。
明白！非常感谢。我正在努力寻找解决方案。

【解决方案2】：

不知道图书馆我会这样说：

import React, { useState } from 'react'
import Select, { OptionsType } from 'react-select'

const options: OptionsType<any> = [
  { value: 'A', label: 'A' },
  { value: 'B', label: 'B' },
  { value: 'C', label: 'C' }
]

const subOptions: { [key: string]: OptionsType<any> } = {
  A: [
    { value: '1', label: '1' },
    { value: '2', label: '2' },
    { value: '3', label: '3' }
  ],
  B: [
    { value: '4', label: '4' },
    { value: '5', label: '5' },
    { value: '6', label: '6' }
  ],
  C: [
    { value: '7', label: '7' },
    { value: '8', label: '8' },
    { value: '9', label: '9' }
  ]
}

const MyComponent = () => {
  const [value, setValue] = useState<{ value: string; label: string }>(options[0])
  const [subValue, setSubValue] = useState<{ value: string; label: string }>(subOptions[value.value][0])

  return (
    <div>
      <Select
        options={options}
        value={value}
        onChange={(value) => {
          setValue(value)
          setSubValue(subOptions[value.value][0])
        }}
      />
      <Select 
        options={subOptions[value.value]} 
        value={subValue} 
        onChange={(value) => 
          setSubValue(value)
        } 
      />
    </div>
  )
}

【讨论】：