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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 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修正代码
2011/05/09 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
Js+XML 操作
2006/09/20 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
使用tensorflow实现线性回归
2018/09/08 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
咖啡馆创业计划书
2014/01/26 职场文书
工程主管竞聘书
2015/09/15 职场文书
Nginx速查手册及常见问题
2022/04/07 Servers
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang