React Antd使用 Select 的动态默认值问题

2020-11-20  本文已影响0人  东方三篇

React Antd使用 Select 的动态默认值问题

由于react的生命周期是,componentWillMount --> render --> componentDidMount 。 而且 antd select组件的defalutValue 只在 render 时候执行一次。 所以解决办法 一是在 render 之前就初始化好 defalutValue 的值 二是让defalutValue 多次 render

# 尝试 在 componentWillMount 周期请求数据,
componentWillMount () { this.getData()}
# 也可以给 defalutValue 添加一个 key, key的值就是 defaultValue 的值
  <Select key={curr} defaultValue={curr} style={{ width: 180 }} size='large' className='select-el' onChange={this.handleChange}>
   {select.map(item => (<Option className='y-select-option' key={item.id} value={item.id}>{item.year}</Option>))}
 </Select>
# 或者 直接把 defalutValue 改成 value 绑定就可以了
 <Select value={curr} style={{ width: 180 }} size='large' className='select-el' onChange={this.handleChange}>
   {select.map(item => (<Option className='y-select-option' key={item.id} value={item.id}>{item.year}</Option>))}
 </Select>
上一篇 下一篇

猜你喜欢

热点阅读