账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    Antd<DataPicker/>allowClear点击清除后再次选择年份,能得到值,但是框上不显示值; 求解 求解....
    • 2020-01-01 00:00
    • 11
    41
    0

    // 打开、关闭时间选择框
    handleOpenChange = open => {

        if(open){      
            this.setState({isopen: true})    
        } else {      
            this.setState({isopen: false})    
        }  
    };
    //  设置值并且关闭时间选择框

    handlePanelChange = (value) => {

    this.setState({
        yearValue:value,
        isopen:false,
    })

    };
    //获取光标 打开时间选择框
    handleOnFocus =() =>{

      this.setState({
          isopen:true
      })

    }
    //清除值
    handChange =() =>{

      this.setState({
          yearValue:null
      })

    }

    <Form.Item>
    {getFieldDecorator('dataTime', {

        initialValue: this.state.yearValue
      })(<DatePicker 
        open={isopen}
        mode="year"
        format="YYYY" 
        placeholder='请选择年份'
        // allowClear={false}
        onFocus={this.handleOnFocus}
        onOpenChange={this.handleOpenChange}
        onPanelChange={this.handlePanelChange}
        onChange={this.handChange}
     />)} 

    </Form.Item>

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 岁月并非如歌 普通会员 1楼

      这个问题可能是因为在使用Ant Design的DatePicker组件时,当allowClear属性启用后,清除选择的日期后进行年份的选择,虽然值已经被正确设置,但是显示部分没有更新。

      尝试以下解决方案:

      1. 确保你在onChange事件中正确设置了state或者props,以保证选中的值能够同步到表单控件上。

      jsx <DatePicker allowClear onChange={value => this.setState({ date: value })} value={this.state.date} />

      1. 检查你传递给DatePicker的value是否是一个有效的日期对象。antd的DatePicker期望的是moment对象(如果你使用了antd@^4.x,则是dayjs对象或者其他符合ISO_8601标准的字符串)。

      2. 如果以上都没问题,尝试强制组件重新渲染,看是否能解决显示问题,例如通过添加一个随机key:

      jsx <DatePicker key={Math.random()} // 这里只是为了示例,实际项目中请使用合适的条件来决定是否需要重新渲染 allowClear onChange={value => this.setState({ date: value })} value={this.state.date} />

      如果问题依旧存在,建议查看并提供更详细的代码片段以便于进一步分析问题所在。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部