ant 使用小結(含自定義表單驗證)
阿新 • • 發佈:2018-12-20
1、Search元件新增value變成受控元件,便於數值的清空與獲取。
<Search style={{width:300}} placeholder="請輸入關鍵字" enterButton="搜尋" value={keywords} onChange={e =>{ this.setState({ //input的資料都在資料物件中(e.target.value) keywords:e.target.value }); }} onSearch={this.doFetch} />
2、input 加字首和字尾,前後加標籤,及文字域,和數字input,都能夠滿足,需要仔細查閱API,使用ant儘量減少自己開發樣式。
3、Select的placeholder不顯示
- 因為值預設我空,或者""的時候,元件預設是有值的,所以placeholder不顯示,設定預設值為undefined可以解決。
3、Modal彈窗常用 如關閉時進行銷燬,(不儲存上次的資料)
afterClose | Modal 完全關閉後的回撥 |
closable | 是否顯示右上角的關閉按鈕 |
confirmLoading | 確定按鈕 loading |
destroyOnClose | 關閉時銷燬 Modal 裡的子元素 |
4、自定義表單驗證,及資料的回顯。
-
自定義或第三方的表單控制元件,也可以與 Form 元件一起使用。只要該元件遵循以下的約定:
-
提供受控屬性
value
或其它與valuePropName
的值同名的屬性。 -
提供
onChange
事件或trigger
的值同名的事件。 -
不能是函式式元件。
-
實際運用:
<Form.Item {...formItemLayout} label="活動模式"> {getFieldDecorator('mode', { rules: [{ required: true, message: '請選擇或填寫活動模式相關資訊' }, { validator: this.mode_validator, //自定義驗證 } ], initialValue: {actMode:detail.actMode,modeValue:detail.modeValue} //資料回顯 })( <ActivityMode onChangeMode={this.onChangeMode} /> )} </Form.Item> //自定義驗證函式 mode_validator = (rule,value,callback) => { let mode = (value||{}).actMode ; let modeValue = (value||{}).modeValue||""; //新增自己的校驗,必須有callback(); if("不通過校驗"){callback("提示語")}else{callback()} }
import React,{Component} from "react";
import {Radio,Input} from "antd";
const RadioGroup = Radio.Group;
export default class ActivityModal extends Component {
constructor(props){
super(props);
//獲取父元件傳入的值
let {actMode,modeValue=""} = props["data-__meta"].initialValue||{}
this.state = {
mode:actMode||"MoneyOff",
values:modeValue.split(",")||[]
}
}
radioChange = (e) => {
this.props.onChangeMode(e.target.value); //呼叫父元件的方法,修改活動模式
this.setState({mode:e.target.value,values:[]},this.onChange)
}
onInputChange(index,e){
let {values} = this.state,val = e.target.value;
if(val){
values[index] = e.target.value;
}else {
values.length = index;
}
this.setState({values},this.onChange);
}
onChange(){
let {mode,values} = this.state;
if(mode == "MoneyOff" && values.length < 2){
this.props.onChange()
return
}
if(mode == "Discount" && values.length < 1){
this.props.onChange()
return
}
//元件內修改把呼叫父元件的onChange方法,把值傳遞出去。
this.props.onChange({
actMode:mode,
modeValue:values.join(',')
})
}
render(){
let {mode,values} = this.state
return (
<div>
<RadioGroup value={mode} onChange={this.radioChange}>
<Radio value={"MoneyOff"}>滿減</Radio>
<Radio value={"Discount"}>折扣</Radio>
<Radio value={"SecKill"}>秒殺</Radio>
</RadioGroup>
{mode == "MoneyOff"?
<div>
<span>每滿</span>
<Input addonAfter="元" value={values[0]} onChange={this.onInputChange.bind(this,0)} />
<span>減</span>
<Input addonAfter="元" value={values[1]} onChange={this.onInputChange.bind(this,1)} />
</div>:
mode == "Discount"?
<div>
<span>全場折扣力度</span>
<Input value={values[0]} onChange={this.onInputChange.bind(this,0)} />
</div>:null
}
</div>
)
}
}