mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-17 19:00:15 +08:00
91821d4d3a
* feat: select edit demo to data driven * feat: edit demo to data driven Co-authored-by: 二货机器人 <smith3816@gmail.com>
1.2 KiB
1.2 KiB
order | title | ||||
---|---|---|---|---|---|
10 |
|
zh-CN
默认情况下 onChange
里只能拿到 value
,如果需要拿到选中的节点文本 label
,可以使用 labelInValue
属性。
选中项的 label
会被包装到 value
中传递给 onChange
等函数,此时 value
是一个对象。
en-US
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.
The label
of the selected item will be packed as an object for passing to the onChange
callback.
import { Select } from 'antd';
import React from 'react';
const handleChange = (value: { value: string; label: React.ReactNode }) => {
console.log(value); // { value: "lucy", key: "lucy", label: "Lucy (101)" }
};
const App: React.FC = () => (
<Select
labelInValue
defaultValue={{ value: 'lucy', label: 'Lucy (101)' }}
style={{ width: 120 }}
onChange={handleChange}
options={[
{
value: 'jack',
label: 'Jack (100)',
},
{
value: 'lucy',
label: 'Lucy (101)',
},
]}
/>
);
export default App;