a-select defaultValue="默认选项">

2、设置value属性


a-select value="默认选项">

3、通过option的key属性设置默认选项


a-select>
  
  

const options = [ { value: '1', label: '默认值1' }, { value: '2', label: '默认值2' }, { value: '3', label: '默认值3' }, ]; a-select defaultValue="1" options={options}>

在上述例子中,我们通过定义一个options数组,在数组元素中定义了value和label两个属性,分别对应选项的值和显示的文本。这样,当我们设置defaultValue为"1"时,a-select便会默认选中"value"值为"1"的选项。

在getFieldDecorator方法中,我们通过配置initialValue属性来设置a-select的默认值。当我们在表单提交的时候,getFieldValue方法便可以获取到当前选中的值。

import React, { useState } from 'react'; import { Select } from 'antd'; function MyComponent(props) { const [defaultValue, setDefaultValue] = useState('1'); function handleChange(value) { setDefaultValue(value); } return ( ); }

在上述例子中,我们通过useState Hook来创建一个名为defaultValue的状态变量,并将初始值设置为"1"。当用户选择其他选项时,handleChange函数会触发并更新defaultValue状态变量,从而实现动态的默认值设置。

import React, { Component } from 'react'; import { Select } from 'antd'; import { connect } from 'react-redux'; class MyComponent extends Component { handleChange = (value) => { const { dispatch } = this.props; dispatch({ type: 'updateDefaultValue', payload: value, }); } render() { const { defaultValue } = this.props; return ( ); } } function mapStateToProps(state) { const { defaultValue } = state; return { defaultValue, }; } export default connect(mapStateToProps)(MyComponent);

在上述例子中,我们首先使用connect方法连接MyComponent组件和redux的store。然后,通过mapStateToProps方法将store中的defaultValue属性映射到MyComponent组件的props属性中。在handleChange方法中,我们通过dispatch方法派发一个type为"updateDefaultValue"的action,payload为用户选择的value值,从而触发store中的reducer更新defaultValue属性。最后,我们使用Select组件来展示选项列表,并设置defaultValue属性为props中的defaultValue属性。