React框架开发使用部分常见问题
此文只作为框架使用者经验分享。
在使用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 ProjectStateReducer = (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
本篇完。
