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)


相关推荐

  • XXE攻击与防御

    XXE攻击与防御XXEXXE是一种很常见的漏洞类型危害也挺大的,如果一个web服务器通过用户上传处理XML文件或POST请求时,那么可能就会存在漏洞。前段时间比较出名的微信支付的xxe漏洞漏洞简历XXE就是XML外部实体注入,当服务器允许引用外部实体时,同过构建恶意内容来攻击网站产生原因解析xml文件时允许加载外部实体,并且实体的URL支持file://和PHP://等协议,没有过滤用户提交的参数危害读取任意文件执行系统命令探测内网端口攻击内网网站DOS攻击…漏洞检测利用burp检测那些接

  • viewstate java_ASP.NET之ViewState

    viewstate java_ASP.NET之ViewState什么是ViewState?在asp时代,大家都知道一个html控件的值,比如input控件值,当我们把表单提交到服务器后,页面再刷新回来的时候,input里面的数据已经被清空.这是因为web的无状态性导致的,服务端每次把html输出到客户端后就不再与客户端有联系.asp.net巧妙的改变了这一点.当我们在写一个asp.net表单时,一旦标明了formrunat=server,那…

  • 清除cookie的方法_js设置cookie

    清除cookie的方法_js设置cookieJavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的。而cookie是运行在客户端的,所以可以用JS来设置cookie.一:设置co

  • 《树先生》影评_hello树先生影评分析

    《树先生》影评_hello树先生影评分析1.树先生的母亲对树说:你看二猪都把咱家的地给占了,你也不去说说。这一个情节对应高鹏结婚的时候树先生借着酒劲向二猪说出来那句话:占了俺家的地,也不提前说声。这个会给树带来心理上的压力,就好像作为家

  • dropdownlist控件的使用方法_redis通知机制

    dropdownlist控件的使用方法_redis通知机制假设:数据源控件GrdiView,无刷新UpdatePannel,友情提示UpdateProgress,分页下拉框DropDownList一般情况下:Gridview的分页有linkbutton或者button,这样要是想让UpdateProgress提示,很简单,先让GridView隐藏,然后给它加个OnClientClick就搞定!在DropDownList的oncha

  • 数据库监控工具_@SpringBootApplication

    数据库监控工具_@SpringBootApplicationp6spy是一个开源的数据库监控插件,我们能通过使用p6spy打印数据库操作或者保存操作日志。首先放上p6spy的git地址https://github.com/p6spy/p6spy在SpringBoot中使用p6spy也是非常简单。一.Spring中使用p6spy1.添加maven依赖https://mvnrepository.com/artifact/p6spy/p6spy找一个…

发表回复

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

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