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. python 文件夹扫描

    扫描指定文件夹下的文件.或者匹配指定后缀和前缀的函数. 假设要扫描指定文件夹下的文件,包含子文件夹,调用scan_files("/export/home/test/") 假设要扫描 ...

  2. Jupyter lab 配置记录，xpython + R 语言

    install.packages(c("repr", "IRdisplay", "evaluate", "crayon" ...

  3. P5666-[CSP-S2019]树的重心【树状数组】

    正题 题目链接:https://www.luogu.com.cn/problem/P5666 题目大意 给出\(n\)个点的一棵树,对于每条边割掉后两棵树重心编号和. \(1\leq T\leq 5, ...

  4. Redis之品鉴之旅（七）

    分布式锁 1)阻塞锁: 尝试在redis中创建一个字符串结构缓存,方法传入的key,value为锁的过期时间timeout的时间戳. 若redis中没有这个key,则创建成功(即抢到锁),然后立即返回 ...

  5. oracle查看和修改session和最大连接数

    第一步,在cmd命令行,输入sqlplus 第二步,根据提示输入用户名与密码 1. 查看processes和sessions参数 SQL> show parameter processes NA ...

  6. 6岁！是时候重新认识下Serverless了

    一.背景 Serverless 概念从2012年开始提出,真正推出相关云产品是2014年AWS推出Lambda.如果我们将 Serverless 比作一个婴儿,那么它已经6岁了. 虽然业界对Serve ...

  7. 寻找最佳路径（ArcPy实现）

    一.背景 随着社会经济发展需求,公路的重要性日益提高.在一些交通欠发达的地区,公路建设迫在眉睫.如何根据实际地形情况设计出比较合理的公路规划,是一个值得研究的问题. 二.实验目的: (1)通过练习,熟 ...

  8. CF123E Maze（期望dp，树形dp，式子）

    题目大意: 给你一棵树,边权都是1,每一个点有一个是起点的概率和一个是终点的概率,你将以起点为根,开始在树上随机dfs,每到一个点,就会将他的所有儿子随机打乱成序列,然后按照那个随机顺序走完,直到走到 ...

  9. 使用固件库点亮led灯

    1. 项目 使用STM32F103VE的固件库实现流水灯设计. 2. 代码 由于这是基于野火的视频进行学习的,项目代码在上节基础上进行编写的. 点亮绿灯: main.c #include " ...

  10. 剑指offer：JZ8 二叉树的下一个结点

    JZ8 二叉树的下一个结点 描述 给定一个二叉树其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的next指针.下图为一棵有9个节点的二叉 ...