2016-05-19 13:44:08 +08:00
---
order: 10
2016-11-08 21:23:29 +08:00
title:
2016-07-10 08:55:43 +08:00
zh-CN: 获得选项的文本
en-US: Get value of selected item
2016-05-19 13:44:08 +08:00
---
2016-07-10 08:55:43 +08:00
## zh-CN
2020-07-01 20:49:24 +08:00
默认情况下 `onChange` 里只能拿到 `value` ,如果需要拿到选中的节点文本 `label` ,可以使用 `labelInValue` 属性。
2016-05-19 18:05:35 +08:00
2020-07-01 20:49:24 +08:00
选中项的 `label` 会被包装到 `value` 中传递给 `onChange` 等函数,此时 `value` 是一个对象。
2016-05-19 13:44:08 +08:00
2016-07-10 08:55:43 +08:00
## en-US
2020-07-01 20:49:24 +08:00
As a default behavior, the `onChange` callback can only get the `value` of the selected item. The `labelInValue` prop can be used to get the `label` property of the selected item.
2016-07-10 08:55:43 +08:00
2020-07-01 20:49:24 +08:00
The `label` of the selected item will be packed as an object for passing to the `onChange` callback.
2016-07-10 08:55:43 +08:00
2022-05-19 09:46:26 +08:00
```tsx
2016-05-19 13:44:08 +08:00
import { Select } from 'antd';
2022-05-21 22:14:15 +08:00
import React from 'react';
2018-06-27 15:55:04 +08:00
2019-05-27 21:32:45 +08:00
const { Option } = Select;
2016-05-19 13:44:08 +08:00
2022-05-19 09:46:26 +08:00
const handleChange = (value: { value: string; label: React.ReactNode }) => {
2020-07-01 20:49:24 +08:00
console.log(value); // { value: "lucy", key: "lucy", label: "Lucy (101)" }
2022-05-19 09:46:26 +08:00
};
2016-05-19 13:44:08 +08:00
2022-05-19 09:46:26 +08:00
const App: React.FC = () => (
2019-05-07 14:57:32 +08:00
< Select
labelInValue
2022-05-19 09:46:26 +08:00
defaultValue={{ value: 'lucy', label: 'Lucy (101)' }}
2019-05-07 14:57:32 +08:00
style={{ width: 120 }}
onChange={handleChange}
>
2016-11-08 21:23:29 +08:00
< Option value = "jack" > Jack (100)< / Option >
< Option value = "lucy" > Lucy (101)< / Option >
2022-04-03 23:27:45 +08:00
< / Select >
2018-11-28 15:00:03 +08:00
);
2022-05-19 09:46:26 +08:00
export default App;
2019-05-07 14:57:32 +08:00
```