Javascript 如何在React中同步两个具有不同显示的下拉列表？

我有一个国家列表，其中包含

键

，

值

，

文本

。 我想要两个

下拉列表

（），一个显示

键

，另一个显示

文本

目标是允许按文本键选择（我们可以在下拉列表中键入）；如果我更新一个，另一个会立即同步

我怎样才能做到这一点

      <Dropdown
        id='form-input-country'
        label='Country'
        placeholder='Select Country'
        fluid
        search
        selection
        options={countryISOOptions} // will show text
      />
      <Dropdown
        id='form-input-country'
        label='Country'
        placeholder='Select Country'
        fluid
        search
        selection
        options={countryISOOptions} // want to show key + want to sync in both direction
      />

---

如果您使用的是受控版本，则每个

下拉列表

都是典型的

输入

，支持名为

value

和

onChange

的两个道具。我将在下面的示例中使用hook

  const [value1, setValue1] = setState('')
  const [value2, setValue2] = setState('')
  const onValue1Change = e => {
     const value = e.target.value
     setValue1(value)
     if (value === 'key') setValue2('country')
  }

  return (
    <div>
      <Dropdown
        value={value1}
        onChange={onValue1Change}
        ...
      />
      <Dropdown
        value={value2}
        ...
      />
    </div>
  )

const[value1，setValue1]=setState（“”）
常量[value2，setValue2]=setState（“”）
常量onValue1Change=e=>{
常量值=e.target.value
设置值1（值）
如果（值=='key'）设置值2（'country'）
}
返回(
)

维护2个选项阵列。一个用于文本，另一个用于键（从第一个选项数组派生）。然后在两个下拉列表中只保留一个

状态

和一个onChange，就可以了

看

请参阅代码片段：

import React，{useState}来自“React”；
从“语义ui反应”导入{Dropdown}；
导入“/styles.css”；
const countryISOOptions=[
{键：“AF”，值：“4”，文本：“阿富汗”}，
{键：“AL”，值：“8”，文本：“阿尔巴尼亚”}，
{键：“DZ”，值：“12”，文本：“阿尔及利亚”}
];
const countryKeys=countryISOOptions.map（{key，value}）=>({
价值
文本：键
}));
导出默认函数App（）{
const[text，setText]=useState（“”）；
const onChangeTextDropdown=（e，d）=>{
log（“onChangeTextDropdown”，即target.value）；
控制台日志（“d”，d）；
setText（d.value）；
};
返回(
你好，代码沙盒
);
}

该库似乎没有实现为单个选择映射当前标签的方法。道具“renderLabel”仅适用于多次渲染

  const [value1, setValue1] = setState('')
  const [value2, setValue2] = setState('')
  const onValue1Change = e => {
     const value = e.target.value
     setValue1(value)
     if (value === 'key') setValue2('country')
  }

  return (
    <div>
      <Dropdown
        value={value1}
        onChange={onValue1Change}
        ...
      />
      <Dropdown
        value={value2}
        ...
      />
    </div>
  )