此文只作为框架使用者经验分享。
在使用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 :
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 :
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包裹
</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
本篇完。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/101034.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...