вопрос
Как связать одни данные с другими данными, например изменить раскрывающийся список, содержимое раскрывающегося списка также можно изменить вместе
выполнить
Эту функцию можно реализовать с помощью Map
- Запишите параметр раскрывающегося списка в качестве значения Map
- Текущие измененные данные используются в качестве исходных данных, а другие данные, которые следуют за изменением, являются целевыми данными.
- Ключ исходных данных в Карте — ключ
source
целевых данных в Карте — значение текущих исходных данных
Затем мы можем получить карту, соответствующую содержимому раскрывающегося списка.
export const OPTIONS = new Map([
[
'source',
[
{
value: 'fruit',
label: '水果',
},
{
value: 'vegetable',
label: '蔬菜',
},
],
],
[
'fruit',
[
{
value: 'apple',
label: '水果',
},
{
value: 'orange',
label: '橘子',
},
],
],
[
'vegetable',
[
{
value: 'cabbage',
label: '白菜',
},
{
value: 'carrot',
label: '胡萝卜',
},
],
],
])
const [state, setState] = useState({
source: '',
target: ''
})
const sourceOption = OPTIONS.get('source')
const targetOption = OPTIONS.get(state.source)
<>
<Select value={
state.source}>
{
sourceOption.map((item) => (
<Select.Option key={
item.value} value={
item.value}>
{
item.label}
</Select.Option>
))}
</Select>
<Select value={
state.target}>
{
targetOption.map((item) => (
<Select.Option key={
item.value} value={
item.value}>
{
item.label}
</Select.Option>
))}
</Select>
<>