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 相关文章推荐
jquery checkbox,radio是否选中的判断代码
Mar 20 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 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 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
通达OA公共代码 php常用检测函数
2011/12/14 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
去除链接虚线全面分析总结
2006/08/15 Javascript
js计算页面刷新的次数
2009/07/20 Javascript
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
原生js实现form表单序列化的方法
2018/08/02 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
Python中的Numpy入门教程
2014/04/26 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
对python的输出和输出格式详解
2018/12/08 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
HTML的form表单和django的form表单
2019/07/25 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
用python发送微信消息
2020/12/21 Python
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
实习教师自我鉴定
2013/12/09 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python