react-antd 的 select 组件 defaultValue 失效

一、失效原因

因为react的生命周期执行顺序是,componentWillMount , render, componentDidMount
render执行的时候,defaultValue应该已经赋值完毕(这个提前赋值的形式比较多,可以在class以外赋值,可以在state初始化时赋值,也可以在componentWillMount 里赋值,也可以在render头部赋值等等等等),如此才能生效

二、三种情况下设置 默认值/初始值

  • defaultValue
  • value
  • initialValue
defaultValue 和 value

defaultValue只会在render时执行一次,然后再怎么设置都不会变化。所以,当将defaultValue设置为state动态值时,state变化,defaultValue却不会变化,这时需要使用 value 来设置默认值

当我们的业务需要 select 多次刷新数据且需要重置数据时,应该将 defaultValue 替换为 value

render() {
	return (
	  <div >
		 <Select
		   value={this.state.value}
		   onChange={this.onChange}
		 >
		   <Option value="jack">Jack</Option>
		   <Option value="lucy">Lucy</Option>
		 </Select>
	  </div>
	)
}

由于使用 value 解决了我的问题,关于 initialValue 便没有作进一步探究,详情参考:https://blog.csdn.net/qq_36990322/article/details/90765043

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值