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 相关文章推荐
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 Javascript
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 木马攻击防御技巧
2009/06/13 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
js 事件小结 表格区别
2007/08/13 Javascript
js 方法实现返回多个数据的代码
2009/04/30 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
毕业生自荐信的主要内容
2013/10/29 职场文书
关于廉洁的广播稿
2014/01/30 职场文书
原材料检验岗位职责
2014/03/15 职场文书
上班离岗检讨书
2014/09/10 职场文书
试用期辞职信范文
2015/03/02 职场文书
投诉信回复范文
2015/07/03 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
Selenium浏览器自动化如何上传文件
2022/04/06 Python