React ANTD V4オートコンプリートオプションを選択したときにラベルの代わりに選択した値を表示します。

Question

私はReact Antd V3を使ってV4にアップグレードしています、私はオートコンプリートコンポーネントが変更されたところで1つの問題に気づいていました、そして今それは奇妙な方法で行動しています

[{value: string, label: 123}]のJSON配列を渡すと、すべてが値の選択では、値が表示されていることを除いて、（ラベルではなく）

代わりにラベルを表示し、選択値をオプション値として選択してください。

これはサンドボックス内の問題を示すリンクです

オプションの配列を渡す別のリンクも正しく機能しません

ノート：

それはAnt V3でうまく機能していました このリンクに示されているように

Answer 1

key属性を使用して一意のIDを渡し、ラベルとしてvalueを使用することができます。その後、onSelect関数の2つのパラメータを使用して、キーまたはその他の属性を取得します。

最初のパラメータは値を渡すために使用されます。
[。] 2番目のものは、選択したオプションのオブジェクトを渡すために使用されます。

データオプションの例：

const dataSource = [
  { key: 1, value: "John Doe"},
  { key: 2, value: "Jane Doe"}
]
 _

フィールドの例：

<AutoComplete
   options={options}
   onSelect={(val, option) => onSelect(val, option)}
   onSearch={onSearch}
>
   <Input.Search size="large" />
</AutoComplete>
 _

フルコード例: CodesAndbox