react PropTypes校验传递的值操作示例


Posted in Javascript onApril 28, 2020

本文实例讲述了react PropTypes校验传递的值操作。分享给大家供大家参考,具体如下:

校验传递的值:

import React, { Component, Fragment } from 'react';
import List from './List.js';
 
class Test extends Component {
  constructor(props) {
    super(props);
    this.state={
      inputValue:'aaa',
      list:['睡觉','打游戏'],
    }
    // this.add=this.add.bind(this);
  }
 
  addList() {
    this.setState({
      list:[...this.state.list,this.state.inputValue],
      inputValue:''
    })
  }
 
  change(e) {
    this.setState({
      inputValue:e.target.value
    })
  }
 
  delete(i) {
    // console.log(i);
    const list = this.state.list;
    list.splice(i,1);
    this.setState({
      list:list
    })
  }
 
  render() { 
    return (
      <Fragment>
      <div>
        <input value={this.state.inputValue} onChange={this.change.bind(this)}/>
        <button onClick={this.addList.bind(this)}>添加</button>
      </div>
      <ul>
        {
          this.state.list.map((v,i)=>{
            return(
                <List key={i} content={v} index={i} delete={this.delete.bind(this)} />
            );
          })
        }
      </ul>
      </Fragment>
    );
  }
}
export default Test;
import React, { Component } from 'react';
import PropTypes from 'prop-types';
 
class List extends Component {
  constructor(props) {
    super(props);
    this.delete = this.delete.bind(this);
  }
 
  render() { 
    return (
    <li
      onClick={this.delete}
    >{this.props.name}{this.props.content}</li>
    );
  }
 
  delete=() => {
    this.props.delete(this.props.index);
  }
}
 
//传值校验
 
List.propTypes={
  name:PropTypes.string.isRequired,
  content:PropTypes.string,
  index:PropTypes.number,
  delete:PropTypes.func
}
 
//设置默认值:
 
List.defaultProps={
  name:'张三'
}
 
export default List;

希望本文所述对大家react程序设计有所帮助。

Javascript 相关文章推荐
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
webpack5 联邦模块介绍详解
Jul 08 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 #Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 #Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 #Javascript
react组件基本用法示例小结
Apr 27 #Javascript
react基本安装与测试示例
Apr 27 #Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 #Javascript
JS浏览器BOM常见操作实例详解
Apr 27 #Javascript
You might like
用PHP产生动态的影像图
2006/10/09 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
google地图的路线实现代码
2009/08/20 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
js Calender控件使用详解
2015/01/05 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
经贸日语专业个人求职信范文
2013/12/28 职场文书
大学生社团活动总结
2014/04/26 职场文书
保护环境倡议书300字
2014/05/19 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
收款委托书
2014/10/14 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
2016年国陪研修感言
2015/11/18 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL