React框架开发使用部分常见问题

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  :
      

      
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包裹
    <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
本篇完。
 
 
 
 
 
 
 
 

转载于:https://www.cnblogs.com/Lujihang/p/10571660.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/101034.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • maven快照版本_网站首页快照不更新

    maven快照版本_网站首页快照不更新Maven快照策略,什么是Maven快照。快照版本与Realse版本的区别。修改Maven快照拉取策略。Maven拉取策略

  • 三极管的使用方法,放大,截止,饱和[通俗易懂]

    三极管的使用方法,放大,截止,饱和[通俗易懂]1.首先认识清楚三极管的管脚                       参考资料万用表区分mos管引脚2.知道管脚我们也就知道NPN和PNP了,箭头朝内PNP,导通电压顺箭头过,电压导通,电流控制。那箭头朝外的自然就是NPN了!NPN管工作在放大区的时候:集电极电压&gt;基极电压&gt;发射极电压也就是:Vc&gt;Vb&gt;Ve …

  • Django 安装_docker安装redis

    Django 安装_docker安装redis安装redis1.使用Homebrew安装Redisbrewinstallredis执行上述命令后出现以下内容,则成功安装Downloadfailed:https://mirrors.

  • Java中遍历Set集合的三种方法「建议收藏」

    Java中遍历Set集合的三种方法「建议收藏」1.迭代遍历:Setset=newHashSet();Iteratorit=set.iterator();while(it.hasNext()){Stringstr=it.next();System.out.println(str);}2.for循环遍历:for(Stringstr:set){System.out.println(str);}…

  • pycharm21 永久激活【2022最新】2022.01.31「建议收藏」

    (pycharm21 永久激活)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.htmlCJM5ZJBPHS-eyJsaWN…

  • android hybrid框架_android studio 开发

    android hybrid框架_android studio 开发本文将介绍android中hybrid开发相关的知识点。hybrid开发实际上是混合开发的意思,这里的混合是H5开发与Native开发混合的意思。下面的文章中我们将逐个介绍一下hybrid开发的概念、hybrid开发的优势、android中如何实现hybrid开发、简单的hybrid开发的例子,以及在产品实践中对hybrid开发的应用,希望通过本篇文章的介绍让您能够对android中的hybrid开发有一个基本的认识

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号