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

本文实例讲述了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程序设计有所帮助。

(0)

相关推荐

  • react基本安装与测试示例

    本文实例讲述了react基本安装与测试.分享给大家供大家参考,具体如下: 语法特点: 声明式编码:只在意结果不在意过程 组件化编码:html,css,js的集合 单向数据流:vue也是单向数据流,有一个双向绑定功能. 支持服务器端编写 高效:先生成一个虚拟DOM,然后在DOM中操作,再一次性返回到真实界面 首先安装好node.js和npm 安装 Webpack:npm install -g webpack 安装对应的 loader: npm install babel-loader --save

  • React组件生命周期详解

    调用流程可以参看上图. React组件提供了生命周期的钩子函数去响应组件不同时刻的状态,组件的生命周期如下: 实例化 存在期 销毁期 实例化 首次调用组件时,有以下方法会被调用(注意顺序,从上到下先后执行): getDefaultProps 这个方法是用来设置组件默认的props,组件生命周期只会调用一次.但是只适合react.createClass直接创建的组件,使用ES6/ES7创建的这个方法不可使用,ES6/ES7可以使用下面方式: //es7 class Component { stat

  • React生命周期原理与用法踩坑笔记

    本文实例讲述了React生命周期原理与用法.分享给大家供大家参考,具体如下: React生命周期 生命周期概览 生命周期的状态 组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲 Unmounting:已移出真实 DOM componentWillMount 在渲染前调用,在客户端也在服务端. 生命周期介绍 componentDidMount : 在第一次渲染后调用,只在客户端.之后组件已经生成了对应的DOM结构,可以通过this.getDOMN

  • React中Ref 的使用方法详解

    本文实例讲述了React中Ref 的使用方法.分享给大家供大家参考,具体如下: React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯一方式.要修改子项,请使用new props 重新呈现它.但是,在某些情况下,需要在典型数据流之外强制修改子项.要修改的子项可以是React组件的实例,也可以是DOM元素.对于这两种情况,React都提供了api. 何时使用refs refs有一些很好的用例: 1.文本选择或媒体播放. 2.触发势在

  • react组件基本用法示例小结

    本文实例讲述了react组件基本用法.分享给大家供大家参考,具体如下: 组件间传值: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div id="app"> </div> &l

  • vue生命周期和react生命周期对比【推荐】

    个人认为,react和vue的业务逻辑是差不多,vue在react上封装了更简洁的方法,使用起来更加的便捷,如:提供了便捷的指令(v-for,v-if,v-model),还提供了更多的属性(computed,watch),我还是比较喜欢用react的,更接近js原生,更容易于理解它. 一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h

  • 老生常谈js-react组件生命周期

    组件的生命周期可分成三个状态: •Mounting:已插入真实 DOM •Updating:正在被重新渲染 •Unmounting:已移出真实 DOM 生命周期的方法有: •componentWillMount 在渲染前调用,在客户端也在服务端. •componentDidMount : 在第一次渲染后调用,只在客户端.之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问. 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeou

  • React.js组件实现拖拽排序组件功能过程解析

    因为使用了react.js技术栈,所以封装优先考虑输入和输出.基于数据驱动去渲染页面.控制拖拽元素的顺序. 由于我不考虑兼容IE8等旧版本浏览器,拖拽的效果采用了HTML5的拖放(Drag 和 drop).当然,如果要求兼容性丰富,使用鼠标点击的相关事件也很简单. 实现的效果如下: 第一步是先了解H5拖放的相关属性,MDN上有详细的说明,链接 有一点需要注意的是,react.js会给所有的属性事件名称前加上"on",后面则为驼峰式写法.例如原生的click事件,在react.js里应使

  • 浅谈React Native 中组件的生命周期

    概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键.RN 组件的生命周期整理如下图: 如图,可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面: 第

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

    本文实例讲述了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:['睡觉','打游戏

  • spring mvc 实现获取后端传递的值操作示例

    本文实例讲述了spring mvc 实现获取后端传递的值.分享给大家供大家参考,具体如下: jsp页面怎么获取从后端传递过来的值? JSTL 方法获取后端传递的值 @RequestMapping("index1") public ModelAndView index1() { ModelAndView model = new ModelAndView("/Index/index"); model.addObject("msg","my

  • Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例

    本文实例讲述了Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作.分享给大家供大家参考,具体如下: Thinkphp5.0 控制器向视图view的赋值 方式一(使用fetch()方法的第二个参数赋值): <?php namespace app\index\controller; use think\Controller; class Index extends Controller { public function study_view(){ return $thi

  • Android开发之获取单选与复选框的值操作示例

    本文实例讲述了Android开发之获取单选与复选框的值操作.分享给大家供大家参考,具体如下: 效果图: 布局文件: <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/root" android:layout

  • Spring实战之注入集合值操作示例

    本文实例讲述了Spring实战之注入集合值操作.分享给大家供大家参考,具体如下: 一 配置 <?xml version="1.0" encoding="GBK"?> <beans xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.springframework.org/schema/beans" xsi:schema

  • Spring实战之获取其他Bean的属性值操作示例

    本文实例讲述了Spring实战之获取其他Bean的属性值操作.分享给大家供大家参考,具体如下: 一 配置 <?xml version="1.0" encoding="GBK"?> <beans xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.springframework.org/schema/beans" xml

  • Spring实战之获取方法返回值操作示例

    本文实例讲述了Spring实战之获取方法返回值操作.分享给大家供大家参考,具体如下: 一 配置文件 <?xml version="1.0" encoding="GBK"?> <beans xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.springframework.org/schema/beans" xmlns:

  • Spring实战之使用Expression接口进行表达式求值操作示例

    本文实例讲述了Spring使用Expression接口进行表达式求值操作.分享给大家供大家参考,具体如下: 一 Bean package org.crazyit.app.domain; import java.util.Date; public class Person { private Integer id; private String name; private Date birth; // 无参数的构造器 public Person() { } // 初始化全部成员变量的构造器 pub

  • C#通过属性名字符串获取、设置对象属性值操作示例

    本文实例讲述了C#通过属性名字符串获取.设置对象属性值操作.分享给大家供大家参考,具体如下: #通过反射获取对象属性值并设置属性值 0.定义一个类 public class User { public int Id { get; set; } public string Name { get; set; } public string Age { get; set; } } 1.通过属性名(字符串)获取对象属性值 User u = new User(); u.Name = "lily"

  • Java引用传递和值传递栈内存与堆内存的指向操作

    值传递: (形式参数类型是基本数据类型):方法调用时,实际参数把它的值传递给对应的形式参数,形式参数只是用实际参数的值初始化自己的存储单元内容,是两个不同的存储单元,所以方法执行中形式参数值的改变不影响实际参数的值. 引用传递: (形式参数类型是引用数据类型参数):也称为传地址.方法调用时,实际参数是对象(或数组),这时实际参数与形式参数指向同一个地址,在方法执行中,对形式参数的操作实际上就是对实际参数的操作,这个结果在方法结束后被保留了下来,所以方法执行中形式参数的改变将会影响实际参数. 现有

随机推荐