ant design下拉框设置默认值
时间: 2024-12-06 22:14:25 浏览: 31
在Ant Design中,设置下拉框的默认值可以通过以下步骤实现:
1. **导入必要的组件**:
首先,需要从`antd`库中导入`Select`组件和其他必要的组件。
2. **定义数据源**:
定义一个数组作为下拉框的选项数据源。
3. **设置默认值**:
使用`defaultValue`属性来设置下拉框的默认值。
以下是一个具体的示例代码:
```jsx
import React, { useState } from 'react';
import { Select } from 'antd';
const { Option } = Select;
const App = () => {
const [value, setValue] = useState('default');
const handleChange = (value) => {
setValue(value);
};
return (
<Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>
Disabled
</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
);
};
export default App;
```
在这个示例中,`defaultValue`属性被设置为`"lucy"`,这意味着下拉框在初始加载时会显示`"lucy"`作为默认值。
阅读全文