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拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
js中Object.create实例用法详解
Oct 05 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自动获取目录下的模板的代码
2010/08/08 PHP
php学习之简单计算器实现代码
2011/06/09 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
php微信支付之APP支付方法
2015/03/04 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
jQuery基础知识小结
2014/12/22 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
js实现全选和全不选
2020/07/28 Javascript
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
Python实现二维数组输出为图片
2018/04/03 Python
Python实现的计算器功能示例
2018/04/26 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
python链表类中获取元素实例方法
2021/02/23 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
新学期教师寄语
2014/04/02 职场文书
要账委托书范本
2014/09/15 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP