此文只作為框架使用者經驗分享。
在使用Ant Design組件庫時，可能拿下來這個功能，例如一個button按鈕，只在意把這個按鈕import進來，可能很少去做對這個按鈕的控制、操作、通過條件來改變它等等。
例如：運用loading可以改變這個按鈕的載入狀態，或者加入icon讓這個按鈕樣式變化。
諸如這類操作Radio單選、Checkbox多選、Cascader級聯選擇、DatePicjer日期選擇器等等。靈活操作其中的屬性， 可以省去大部分基礎操作代碼。
render中代碼要控制在215行，如果無法避免超出了上限導致控制台報警告，可以將內容分類別分開引入，
例如我是將部分功能代碼（property產權部分）放在components/property中，然后引入進父組件。
那么在整個頁面用戶填寫了input框選擇了radio 然后想進入下一級，如何將這些值保存 並且記錄下來呢？
我用的是Form 引用getFieldDecorator(){} 例如：
<FormItem> //注意在使用時value只可以通過initialValue設置
{
getFieldDecorator('EthnicityRadio', { //注意命名規范 這將作為這個值得ID，列如當用戶選擇了Yes： EthnicityRadio ：“Yes”
initialValue: step6.EthnicityRadio ? step6.EthnicityRadio : '', // 在從下一個頁面返回來時，將上次的選擇保存。
rules: [{ required: true, message: 'please choose' }] // 判斷是否有未填寫 如果未填寫不可繼續
})(
<RadioGroup options={optionsa} /> //Radio
)
}
</FormItem>
在componentWillUnmount(){}組件被卸載時將所有的值拿到:
componentWillUnmount() {
this.props.form.validateFields((err, values) => {
cosnole.log(values) //查看保存到的數據
if (!err) {
this.props.SetGovernmentQuestions(values);
}
});
}
上面SetGovernmentQuestions 是在redux中進行操作：
index.js :
index.js :
import { connect }
from '
react-redux';
import GQ
from '
./governmentQuestions';
import *
as C
from '
actions/
constants'
const
mapStateToProps = (state) => (
{
store: state.hlaState
}
);
const
mapDispatchToProps = dispatch => {
return {
SetGovernmentQuestions: (val) => dispatch({ type: C.HLA_OPERATION_QUESTION_SET, data: val }),
}
};
export default
connect(
mapStateToProps,
mapDispatchToProps
)(GQ);
這樣通過
SetGovernmentQuestions 中 type: C.HLA_OPERATION_QUESTION_SET 獲取：
reducers \ lib \ project.js :
reducers \ lib \ project.js :
exports
const initState = {
types:' ',
step1:{},
// 可以視為第一步操作
step2:{},
// 第二步
}
const
Project
StateReducer = (stet = initState , action) =>{
let types = state.types;
let step1 = state.step1,
let step2 = state.step2,
const val = action.data;
switch (action.type) {
case C.HLA_OPERATION_QUESTION_SET:
//注意這里是冒號
types = val
return { ...state, types }; //第一步結束，以此類推 每個步驟都會將值保存起來避免丟失
}
};
export
default
ProjectStateReducer
項目中Select的選項應該是一個數組：
例如：
聲明一個數組：
propertySelectData = [
"A",
"B",
"C"
];
{
propertySelectData.map(province => <Option key={province}>{province}</Option>)}
好，這樣數組形式已經完成
但是如果用剛剛的getFieldDecorator(){} 包裹着的復選框中，點擊其中一個選項彈出接下來的內容，那么這整個操作會被提示一個報錯：
Failed prop type: Invalid prop `value` of type `string` supplied to `CheckboxGroup`, expected `array`.
這個原因就是在設置了initialValue 從上一級返回時應該將后面的 ‘ ’ 修改為 [ ] 數組形式。
常用操作：
條件判斷 ：例如 如果一個Radio選擇了Yes ，我要在下面顯示出一個Input框如何實現：
在你的Input的外層包裹：
{this.state.pig === "Yes" &&
// pig是綁定在上一級的radio的onchange中this.setState({pig = e.target.value})中的值 如果點擊了Yes 就讓下面div中的內容顯示。
<div>
// 注意 內容一定要用一層div包裹
<Input />
</div>
}
Radio選項：
如果有大量的Radio選項內容都是統一，那么建議做一個全局options ：
options = [ "Yes", "No" ]
使用：options={options}
如果已經保存了本頁的用戶輸入的數據，並且已經記錄，那么如果在下個頁面怎么拿到這些值呢？
首先通過const ：
const { value1 , value2 } = this.props,
// 這樣就通過this.props 拿到了記錄的value1 或者value2
{ value3 , value4 } = this.stete,
//如果只在本頁面中，依然通過state
{ step1 } = store；
//表明此次是整合流程中第幾個頁面的內容。
DatePicjer日期選擇器如何自定義判斷選擇范圍?
如果頁面中出現兩次日期選擇器，在用戶選擇第一個日期后，第二個日期選擇器必須選擇第一個時間之前的日期。
通過
disabledDate：
日期1：
disabledDate = (current) => {
return current && current > moment()
}
onChange = (dateString) =>{
this.setState ({
dateString
// 方便接下來通過state調用dateString
})
}
日期2：
disabledDateSecond = (current) => {
return current && current > moment(this.state.dateString);
//moment中通過state獲取到dateString
}
render(){
return (
< DatePicker
//第一個日期選擇器
disabledDate = {this.disabledDate}
onChange = {this.onChange} //通過onchange 拿到dateString
>
< DatePicker //第二個日期選擇器
disabledDate = {this.disabledDateSecond }
>
)
}
說一下export default 和 export 和import的區別
export與
export
default 均可用於導出常量、函數、文件、模塊等，可以在其它文件或模塊中通過import+(常量 | 函數 | 文件 | 模塊)名的方式，將其導入，以便能夠對其進行使用
在一個文件或模塊中，export、import可以有多個，export default僅有一個
通過export方式導出，在導入時要加{ }，export default則不需要
https://github.com/White9999
本篇完。