0

项目中需要点击按钮展现日期选择弹框,所已我用的open属性,通过button触发更改open为true||false;但是,不能点击空白使open属性为false,请问,有哪位大佬解决过次次问题


datePickerChange(date) {

const { datePickerOpen } = this.state;
this.setState({
  datePickerOpen: !datePickerOpen
})

}

datePickerOpen() {

const { datePickerOpen } = this.state;
this.setState({
  datePickerOpen: !datePickerOpen
})

}

<Button type="primary" icon="plus" onClick={() => this.datePickerOpen()}>增加对比时段</Button>

      <DatePicker
        className={styles.datePicker}
        open={datePickerOpen}
        onChange={(date)=>this.datePickerChange(date)}

/>

2019-03-07 提问
1 个回答
0

你这个DatePicker是自己实现的不是第三方库吗?不然的话应该大都默认支持的。
点击空白处这个没办法在组件上添加事件监听的。虽然组件的onClick事件本质上也不是绑定在组件对应的DOM元素上的。需要将事件绑定document.body上,你需要的其实是一个hoconClickOutSide的react 版本实现。请移步这里 https://github.com/Pomax/reac...
用法还有源码都是很简单的。
或者你的DatePicker组件上componentDidMount在document.body上注册监听事件去判断,然后在componentWillUnmount`里移除监听

撰写答案

推广链接