直接上代码
<!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/babel-standalone@6.26.0/babel.min.js"></script><!-- 引入 Ant Design 的 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd@4.24.10/dist/antd.min.css"><!-- 引入 Ant Design 的 JS 文件 --><script src="https://cdn.jsdelivr.net/npm/antd@4.24.10/dist/antd.min.js"></script>
</head><body><div id="root"></div><script type="text/babel">const onChange = (value) => {// 打印整个对象数组console.log('selected items:', value);// 如果需要，可以提取 value 和 labelconst 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.SelectshowSearchplaceholder="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}即可
