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彈窗常用  如關閉時進行銷燬，（不儲存上次的資料）

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>
		)
	}
}