antd选择器组件设置默认选中
时间: 2024-09-30 12:16:26 浏览: 51
在Ant Design (antd) 的 Select(下拉选择器)组件中,如果你想要设置默认选中的值,可以这样做:
1. 使用`defaultValue`属性:当你有一个预设的选项字符串或对象时,可以在Select标签里直接指定这个属性。例如:
```jsx
<Select defaultValue="选项1">
<Option value="选项1">选项1</Option>
<Option value="选项2">选项2</Option>
<!-- 更多选项 -->
</Select>
```
2. 如果需要动态设置默认值,可以在初始化组件时通过state或props传递:
```jsx
import { useState } from 'react';
import { Select } from 'antd';
const SelectWithDefault = () => {
const [selectedValue, setSelectedValue] = useState('选项1'); // 初始化默认值
return (
<Select value={selectedValue} onChange={(e) => setSelectedValue(e.target.value)}>
<Option value="选项1">选项1</Option>
<Option value="选项2">选项2</Option>
<!-- 更多选项 -->
</Select>
);
};
// 在组件挂载时,你可以传入默认值
<SelectWithDefault defaultValue="默认选项" />
```
阅读全文