antd-日歷組件,前后禁止選擇,只能選中間一部分的實(shí)例
antd-日歷組件，前后禁止選擇，只能選中間一部分：
dateDisabledDate(current) { // 需求有效期的禁止選擇時間
if (this.state.sailingtimeValue != null && this.state.sailingtimeValue.length != 0) {
return current && (current < moment().subtract(1, 'd').add(1, "M") || current > moment(this.state.sailingtimeValue[0]).subtract(1, 'd'));
} else {
return current && current < moment().subtract(1, 'd').add(1, "M")
}
}
補(bǔ)充知識：關(guān)于 Ant Design 中 Input 組件的 defaultValue 屬性的一個小問題
記錄關(guān)于一次 Ant Design 使用時遇到的一個問題，defaultValue屬性賦值，頁面交互操作處理數(shù)據(jù)之后頁面數(shù)據(jù)未更新（未按照預(yù)期顯示）。
class Component extends React.Component{
constructor(props) {
super(props);
this.state = {
list: [
{name: 111},
{name: 222},
{name: 333},
]
};
}
deal(index) {
let {list} = this.state;
list.splice(index, 1);
this.setState({
list
});
}
render() {
let {list} = this.state;
return (
<span>
<Button type="danger" onClick={this.deal.bind(this, index)}>刪除</Button>
{
list.map((item, index) => {
<Row>
<Col span={24}>
<Item {...formItemLayout} label=" " colon={false}>
<Input defaultValue={item.name}
onChange={event => {this.nameChange(event, index)}} />
</Item>
</Col>
</Row>
})
}
</span>
);
}
}
頁面初始效果：
經(jīng)過 deal 方法處理之后的效果：
經(jīng)過多次嘗試，比如：
懷疑 splice 出了問題，因?yàn)楣こ讨?splice 有很多庫的處理，經(jīng)過各種嘗試打印 splice 處理之后的數(shù)據(jù)結(jié)果，排除 splice 因素
嘗試 react-addons-update ，排除，
在 render 函數(shù)中打印結(jié)果，發(fā)現(xiàn)數(shù)據(jù)更新過了，費(fèi)解…
在 render 中，通過 {item.name} 檢測數(shù)據(jù)變化，確定 span 顯示的數(shù)據(jù)已經(jīng)發(fā)生變化，最終確定結(jié)果：數(shù)據(jù)已經(jīng)更新，Input 顯示存在問題?。?！
……
經(jīng)過一段時間的思考，確認(rèn)數(shù)據(jù)已經(jīng)更新，只是在顯示的時候出了問題，返回去查 antD 的 Input 文檔，發(fā)現(xiàn)了：
defaultValue 與 value 兩個相似的屬性，于是嘗試著 value 替代 defaultValue 最終解決問題。
以上這篇antd-日歷組件,前后禁止選擇,只能選中間一部分的實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+axios實(shí)現(xiàn)post文件下載
這篇文章主要為大家詳細(xì)介紹了vue+axios實(shí)現(xiàn)post文件下載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
VUE實(shí)現(xiàn)分布式醫(yī)療掛號系統(tǒng)預(yù)約掛號首頁步驟詳情
這篇文章主要為大家介紹了VUE實(shí)現(xiàn)分布式醫(yī)療掛號系統(tǒng)預(yù)約掛號首頁步驟詳情，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
vue中div禁止點(diǎn)擊事件的實(shí)現(xiàn)
這篇文章主要介紹了vue中div禁止點(diǎn)擊事件的實(shí)現(xiàn)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue中數(shù)組與對象修改觸發(fā)頁面更新的機(jī)制與原理解析
這篇文章主要介紹了Vue中關(guān)于數(shù)組與對象修改觸發(fā)頁面更新的機(jī)制與原理簡析,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
想到頭禿也想不到的Vue3復(fù)用組件還可以這么hack的用法
這篇文章主要為大家介紹了想到頭禿也想不到的Vue3復(fù)用組件還可以這么hack的用法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
vue如何實(shí)時往數(shù)組里追加數(shù)據(jù)
這篇文章主要介紹了vue如何實(shí)時往數(shù)組里追加數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
基于Vue3+Three.js實(shí)現(xiàn)一個3D模型可視化編輯系統(tǒng)
這篇文章主要介紹了基于Vue3+Three.js實(shí)現(xiàn)一個3D模型可視化編輯系統(tǒng),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue中如何安裝使用jquery的教程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
在vue中使用echarts實(shí)現(xiàn)飛機(jī)航線水滴圖詞云圖效果
這篇文章主要介紹了在vue中使用echarts實(shí)現(xiàn)飛機(jī)航線?水滴圖?詞云圖,通過引入中國地圖JS文件，會自動注冊地圖，文中結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
vue+elementUI實(shí)現(xiàn)表單和圖片上傳及驗(yàn)證功能示例
這篇文章主要介紹了vue+elementUI實(shí)現(xiàn)表單和圖片上傳及驗(yàn)證功能,結(jié)合實(shí)例形式分析了vue+elementUI表單相關(guān)操作技巧,需要的朋友可以參考下2019-05-05