antd Select下拉菜单如何动态添加option并更新内容？

本文共计694个文字，预计阅读时间需要3分钟。

在使用`antd`库的`Select`组件动态添加`option`时，可以通过表单单元来绑定选择值。以下是一个简化的示例代码，展示如何通过`form`来绑定`Select`的选择，并提供一个通用的方法：

javascriptimport React from 'react';import { Form, Select } from 'antd';

const { Option }=Select;

// 假设的示例数据let giftScope=[ { code: 200, id: 1, name: 张 }];

// 动态添加Option的通用方法const addOptions=(options)=> { options.forEach(item=> { {item.name}; });};

const DynamicSelect=()=> { const [form]=Form.useForm();

const onFinish=(values)=> { console.log('Received values of form: ', values); };

return ( );};

export default DynamicSelect;

在这个例子中，`addOptions`方法接收一个数据数组，遍历数组中的每个对象，为`Select`组件的每个选项生成`Option`。`DynamicSelect`组件使用`Form`来管理表单状态，并绑定到`Select`组件上。表单提交时会触发`onFinish`方法，打印出选中的值。