antd select默认选中第一个
时间: 2023-10-13 20:26:54 浏览: 127
你可以通过设置`defaultValue`或`value`属性来实现antd select组件的默认选中第一个选项。
使用`defaultValue`属性时,你可以将默认值设置为选项数组中的第一个元素,示例如下:
```jsx
import { Select } from 'antd';
const { Option } = Select;
const options = ['Option 1', 'Option 2', 'Option 3'];
function MySelect() {
return (
<Select defaultValue={options[0]}>
{options.map((option) => (
<Option key={option}>{option}</Option>
))}
</Select>
);
}
```
使用`value`属性时,你需要先在组件的`state`中定义一个`value`变量,然后在`componentDidMount`生命周期方法中将其初始化为选项数组中的第一个元素。示例如下:
```jsx
import { Select } from 'antd';
const { Option } = Select;
const options = ['Option 1', 'Option 2', 'Option 3'];
class MySelect extends React.Component {
state = {
value: options[0],
};
componentDidMount() {
this.setState({ value: options[0] });
}
render() {
const { value } = this.state;
return (
<Select value={value}>
{options.map((option) => (
<Option key={option}>{option}</Option>
))}
</Select>
);
}
}
```
阅读全文