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

Question

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

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

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

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

Answer 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>
    );
  }

Answer 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>
  )
}

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

Create rows of dynamic dropdowns based on value of another dropdown in react

javascript

arrays

reactjs

react-select