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. Linux服务器时间同步配置

    Linux服务器时间同步配置   以CentOS7 做时间服务器,其他服务器(Centos 6.RHEL7)同步该服务器时间 RHEL 7.CentOS 7 默认的网络时间协议 为Chrony 本教程 ...

  2. Docker安装Jenkins 从GitLab上拉取代码打包SpringBoot项目并部署到服务器

    1.  安装Jenkins 采用 Docker 方式安装 jenkins 首先,宿主机上需要安装java和maven,这里我的安装目录如下: 由于是docker安装,jenkins将来是在容器里面运行 ...

  3. SpringBoot 添加本地 jar 文件

    前言 有时候我们在项目中,会用到一些本地 jar 包文件,比如隔壁公司自己打包的: 此时无法从maven远程仓库拉取: 那么我们可以考虑把 jar 文件安装到本地 maven 库中,然后再添加依赖. ...

  4. C++学习笔记：08 多态性

    课程<C++语言程序设计进阶>清华大学 郑莉老师) 基本概念 多态性 具体的讲,在面向对象程序设计中,指同样的方法被不同对象执行时会有不同的执行效果. 多态的实现 绑定机制 绑定是将一个标 ...

  5. Superior Scheduler：带你了解FusionInsight MRS的超级调度器

    摘要:Superior Scheduler是一个专门为Hadoop YARN分布式资源管理系统设计的调度引擎,是针对企业客户融合资源池,多租户的业务诉求而设计的高性能企业级调度器. 本文分享自华为云社 ...

  6. 网络基础--简单理解什么是DNS? TCP? UDP? Http? Socket?

    什么是IP 协议?  协议就是为了实现网络通信而创建的一系列规范.  通常我们的网络模型从上到下共分为4层: 应用层, 传输层, 网络层 和数据链路层. IP协议属于网络层协议,它精确定义了网络通信中 ...

  7. Java到底怎么学？

    你现在是不是想学Java,但很迷茫不知该从何下手,那么请认真看完这篇文章,希望对你有所帮助! 作为零基础刚刚接触Java的朋友们来说,我的建议还是先看视频,虽然有很多人说看视频学习慢,建议直接买优秀的 ...

  8. SPOJ2939 QTREE5（LCT维护子树信息）

    QWQ嘤嘤嘤 此题正规题解应该是边分治??或者是树剖(总之不是LCT) 但是我这里还是把它当成一个LCT题目来做 首先,这个题的重点还是在update上 因为有\(makeroot\)这个操作的存在, ...

  9. xml文件报Element 'beans' cannot have character [children],because the type's content type is element

    写springMvc.xml文件时,偶然遇到 Element 'beans' cannot have character [children],because the type's content t ...

  10. 试题 算法训练 二进制数数 java解题

    资源限制 时间限制:1.0s   内存限制:256.0MB 问题描述 给定L,R.统计[L,R]区间内的所有数在二进制下包含的"1"的个数之和. 如5的二进制为101,包含2个&q ...