React 三大属性state,props,refs以及组件嵌套的应用

该项目实现了一个简单的表单输入添加列表的内容

代码如下

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>Hello React!</title>

    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>

    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>

<body>

    <div id="example"></div>

    <script type="text/babel">

        class App extends React.Component {

            constructor(props) {

                super(props)

                this.state = {

                    tudo : ["吃饭", '睡觉', '玩耍']

                }

                //将自定义函数中的this绑定到父类里

                this.AddData = this.AddData.bind(this);

            }

            AddData (data) {

                //取出状态

                const {tudo} = this.state;

                tudo.unshift(data);

                //更新状态

                this.setState({tudo});

            }

            render() {

                return (

                    <div>

                        <h2>小潘的行为</h2>

                        <Add tudo = {this.state.tudo} AddData={this.AddData}/>

                        <List tudo = {this.state.tudo}/>

                    </div>

                )

            }

        }

        class Add extends React.Component {

            constructor(props) {

                super(props)

                //将自定义函数中的this绑定到父类里

                this.add = this.add.bind(this);

            }

            add () {

                const value = this.input.value;

                if (!value) return ;

                this.props.AddData(value);

                this.input.value = '';

            }

            render() {

                const {tudo} = this.props;

                return (

                    <div>

                        <input type="text" ref = {input => this.input = input}/>

                        <button onClick = {this.add}>Add #{tudo.length + 1}</button>

                    </div>

                )

            }

        }

        Add.propTypes = {

            tudo : PropTypes.array.isRequired,

            AddData: PropTypes.func.isRequired

        }

        class List extends React.Component {

            render() {

                const {tudo} = this.props;

                return (

                    <ul>

                        {

                            tudo.map( (tudo, index) => <li key={index}>{tudo}</li> )

                        }

                    </ul>

                )

            }

        }

        List.propTypes = {

            tudo : PropTypes.array.isRequired

        }

        ReactDOM.render( <App /> , document.getElementById('example'));

    </script>

</body>

</html>

React 三大属性state,props,refs以及组件嵌套的应用的更多相关文章

  1. 组件的三大属性state，props，refs与事件处理

    组件的三大属性state state是组件对象最重要的属性, 值是对象(可以包含多个数据),组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 初 ...

  2. React组件三大属性之 props

    React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...

  3. React基础篇（2） -- state&props&refs

    内容简介 state props refs 行内样式及动态类名 state 基本介绍 React 把组件看成是一个状态机(State Machines).通过与用户的交互,实现不同状态,然后渲染 UI ...

  4. 【React】react学习笔记03-React组件对象的三大属性-state

    今天晚上学习了React中state的使用,特做此记录,对于学习的方式,博主仍然推荐直接复制完整代码,对着注释观察现象!: 上文中,我列举了两种React自定义组件的声明,这里我拿方式二进行举例: / ...

  5. React入门---属性(state)-7

    state------>虚拟dom------>dom 这个过程是自动的,不需要触发其他事件来调用它. state中文理解:页面状态的的一个值,可以存储很多东西. 学习state的使用: ...

  6. react的三大属性

    react的三大属性 state props  refs props 来自外部属性 states 来自内部状态 refs 用于表示组件内某个元素 state基础(最重要的属性) state是组件对象最 ...

  7. React组件三大属性之 refs

    React组件三大属性之 refs refs属性 1) 组件内的标签都可以定义ref属性来标识自己 a. <input type="text" ref={input => ...

  8. React组件三大属性之state

    React组件三大属性之state 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示 理解1) state是组件对象最重要的属性, 值是对象(可以包含多个数 ...

  9. React Native组件、生命周期及属性传值props详解

    创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...

随机推荐

  1. django ORM教程（转载）

    Django中ORM介绍和字段及字段参数   Object Relational Mapping(ORM) ORM介绍 ORM概念 对象关系映射(Object Relational Mapping,简 ...

  2. CF605E-Intergalaxy Trips【期望dp】

    正题 题目链接:https://www.luogu.com.cn/problem/CF605E 题目大意 给出\(n\)个点的一张完全有向图,每一天\(i\)到\(j\)的路径有\(p_{i,j}\) ...

  3. P5369-[PKUSC2018]最大前缀和【状压dp】

    正题 题目链接:https://www.luogu.com.cn/problem/P5369 题目大意 一个数列\(a\)的权值定义为\(max\{\sum_{i=1}^ka_i\}(k\in[1,n ...

  4. 关于国密HTTPS 的那些事（一）

    关于国密HTTPS 的那些事(一) 随着<密码法>密码法的颁布与实施,国密的应用及推广终于有法可依.而对于应用国密其中的一个重要组成部分----国密HTTPS通信也应运而生.为了大家更好的 ...

  5. Kubernetes集群(RKE)安装ArgoCD排坑

    Photo by Pixabay from Pexels Argo CD是一个声明式的,基于Kubernetes的GitOps持续交付工具.更多的细节参考 ArgoCD官网 的说明,这里记录了一些实践 ...

  6. ☠全套Java教程_Java基础入门教程，零基础小白自学Java必备教程👾#010 #第十单元 Scanner类、Random类 #

    一.本单元知识点概述 (Ⅰ)知识点概述 二.本单元教学目标 (Ⅰ)重点知识目标 1.API的使用2.Scanner类的使用步骤3.Random类的使用 (Ⅱ)能力目标 1.掌握API的使用步骤2.使用 ...

  7. 洛谷3809 SA模板 后缀数组学习笔记（复习）

    其实SA这个东西很久之前就听过qwq 但是基本已经忘的差不多了 嘤嘤嘤 QWQ感觉自己不是很理解啊 所以写不出来那种博客 QWQ只能安利一些别人的博客了 小老板 真的是讲的非常好 不要在意名字 orz ...

  8. Android应用开发特色

    目录 Android应用开发特色 四大组件 Activity Service Broadcastreceiver Contentprovider 丰富的系统控件 Sqlite数据库 强大的多媒体 An ...

  9. SimpleDateFormat、Date和String互转

    今天在修改bug时遇到一个查询异常:根据时间段查询的时候,如果查询时间段含12点钟,那么能查到时间段之外的其他数据: 跟踪了数据流动发现,前同事写的程序中,有一处是讲前端传来时间字符串转为Date的一 ...

  10. mysql join语句的执行流程是怎么样的

    mysql join语句的执行流程是怎么样的 join语句是使用十分频繁的sql语句,同样结果的join语句,写法不同会有非常大的性能差距. select * from t1 straight_joi ...