ant-design-ui的Select选择器多选时同时获取label与vaule值

wuningw2024-12-24 6:08
直接上代码
javascript 复制代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My React App</title>
    <!-- 引入 React 和 ReactDOM -->
    <script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js" crossorigin></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
    <!-- 引入 Babel 用于编译 JSX -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/babel.min.js"></script>
    <!-- 引入 Ant Design 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.css">
    <!-- 引入 Ant Design 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        const onChange = (value) => {
            // 打印整个对象数组
            console.log('selected items:', value);
            // 如果需要，可以提取 value 和 label
            const selectedValues = value.map(item => item.value);
            const selectedLabels = value.map(item => item.label);
            console.log('selected values:', selectedValues.join(', '));
            console.log('selected labels:', selectedLabels.join(', '));
            value.forEach(item => {
                console.log(`Label：${item.label},value：${item.value}`);
            });
        };
        const onSearch = (value) => {
            console.log('search:', value);
        };
        // 定义一个简单的 React 组件
        class App extends React.Component {
            render() {
                return (
                    <div>
                        <h1>Hello, React!</h1>
                        <p>Welcome to your React application.</p>
                        <antd.Button type="primary">Primary Button</antd.Button>
                        <antd.Select
                            showSearch
                            placeholder="Select a person"
                            mode="multiple"
                            style={{
                                width: '20%',
                            }}
                            labelInValue={true}
                            optionFilterProp="label"
                            onChange={onChange}
                            onSearch={onSearch}
                            options={[
                                {
                                    value: 'j',
                                    label: 'Jack',
                                },
                                {
                                    value: 'l',
                                    label: 'Lucy',
                                },
                                {
                                    value: 't',
                                    label: 'Tom',
                                },
                            ]}
                        />
                    </div>
                );
            }
        }

        // 将组件渲染到 DOM 中
        ReactDOM.render(<App />, document.getElementById('root'));

    </script>
</body>


</html>
主要是将组件属性labelInValue={true}即可