美文网首页
React Antd使用 Select 的动态默认值问题

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

作者: 东方三篇 | 来源:发表于2020-11-20 11:30 被阅读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>

相关文章

网友评论

      本文标题:React Antd使用 Select 的动态默认值问题

      本文链接:https://www.haomeiwen.com/subject/vordiktx.html