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. css颜色字符串转换, 字符串转化为驼峰形式

    * 将 rgb 颜色字符串转换为十六进制的形式,如 rgb(255, 255, 255) 转为 #ffffff1. rgb 中每个 , 后面的空格数量不固定2. 十六进制表达式使用六位小写字母3. 如 ...

  2. linux，apache，php，mysql常用的查看版本信息的方法

    1. 查看linux的内核版本,系统信息,常用的有三种办法:   uname -a:   more /etc/issue;    cat /proc/version; 2. 查看apache的版本信息 ...

  3. Java集合框架总览

    Java集合 Java 集合框架主要包括两种类型的容器,一种是集合(Collection),存储一个元素集合,另一种是图(Map),存储键/值对映射.Collection 接口有 3 种子类型,Lis ...

  4. CF755G-PolandBall and Many Other Balls【倍增FFT】

    正题 题目链接:https://www.luogu.com.cn/problem/CF755G 题目大意 \(n\)个东西排成一排,每个组可以选择一个单独的物品或者两个连续的物品,一个物品不同同时在两 ...

  5. Python3入门系列之-----json与字典转换

    json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写 JSON 函数 使用 JSON 函数需要导入 json 库:import js ...

  6. 11.4.2 LVS—NAT

    Virtual Server via NAT(VS-NAT) 用地址翻译实现虚拟服务器｡地址转换器有能被外界访问到的合法IP地址,它修改来自专有网络的流出包的地址｡外界看起来包是来自地址转换器本身,, ...

  7. Java秘诀！零基础怎样快速学习Java？

    对于零基础想学Java的朋友,其实一开始最应该做的就是定好学习目标和端正学习态度,切记不要三天打鱼两天晒网! 首先你是零基础,现在急需把Java学好,在保证学习质量的同时,用最短的时间学好Java应该 ...

  8. Jenkins 进阶篇 - 单元测试覆盖率

    我们做项目开发,肯定免不了要写单元测试,不管是 Java 项目.Python 项目.PHP 项目,甚至是 nodejs 项目,都应该要写单元测试,本小节就来介绍单元测试的覆盖率报告输出和展示,在后面的 ...

  9. C11 (GNU Dialect) -std=gnu11 和 -std=c11

    C11 (GNU Dialect) -std=gnu11 和 -std=c11 C11 (GNU Dialect) -std=gnu11 和 -std=c11 用于 IntelliSense 的 C ...

  10. Python代码阅读（第21篇）：将变量名称转换为蛇式命名风格

    Python 代码阅读合集介绍:为什么不推荐Python初学者直接看项目源码 本篇阅读的代码实现将变量名称转换为蛇式命名风格(snake case)的功能. 本篇阅读的代码片段来自于30-second ...