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. 远程连接centos7中mysql8.0

    远程连接centos7中mysql8.0 1.使用Navicat for MySQL或者其它数据连接软件 2.先检查centos中防火墙是否关闭,如果关闭不需要设置,如果没有关闭防火墙,请打开3306 ...

  2. xadmin使用富文本

    环境:pycharm django1.11.20 python2.7 后台xadmin(根据网络各种资料实现) 本教程接上篇如何安装 xadmin,如何不清楚,请看上一篇(django安装xadmin ...

  3. python 建站教程

    主端:安装nginx uwsgi django pymysql mysql安装mysql到http://repo.mysql.com/里面找 mysql57-community-release-el7 ...

  4. Pycharm软件学生和老师可申请免费专业版激活码

    有一种邮箱,叫做教育邮箱,这东西在这个互联网的世界有很大的优惠及特权,在 Jetbrain 这里, 如果你有教育邮箱(没有教育邮箱怎么办?.edu.cn后缀的邮箱)但很多学生.甚至老师都未必有. 你只 ...

  5. GoLang设计模式08 - 命令模式

    命令模式是一种行为型模式.它建议将请求封装为一个独立的对象.在这个对象里包含请求相关的全部信息,因此可以将其独立执行. 在命令模式中有如下基础组件: Receiver:唯一包含业务逻辑的类,命令对象会 ...

  6. C语言练习：hackerrank十五关

    第一关:Hello World C 输入一行字符串(可能含空格),输出hello world\n,字符串 Sample Input 0 Welcome to C programming. Sample ...

  7. NOIP 模拟 七十一

    最后一场多校模拟赛,好像是信心赛??不过考的不行..最近难题比较多,对题目的难度把握不够好,经常出现简单题跳过的现象. 100+100+20+40 T1 签到题(qiandao) 如果一个点的度数不是 ...

  8. Java初步学习——2021.10.12每日总结，第六周周二

    (1)今天做了什么: (2)明天准备做什么? (3)遇到的问题,如何解决? 今天学习了菜鸟教程Java实例,数组 1.数组的排序和元素的查找--sort和binarySearch方法 import j ...

  9. 题解 CF736D Permutations

    link Description 现在,你有一个二分图,点数为 \(2n\). 已知这个二分图的完备匹配的个数是奇数. 现在你要知道,删除每条边后,完备匹配个数是奇数还是偶数. \(1\le n\le ...

  10. Perl 编程 基础用法

    Perl 编程 标准头部写法 #!/usr/bin/perl -w # 标准的头部写法,-w意为显示警告 变量 $a=$b+10 # $a和$b都不需要定义,拿过来就用 Note: $flag=0 如 ...