react的三大属性 state props  refs

  • props 来自外部属性
  • states 来自内部状态
  • refs 用于表示组件内某个元素

state基础（最重要的属性）

  • state是组件对象最重要的属性，其值是对象，即可以包含多个数据
  • 可以通过更新组件的state来更新对应的页面的显示（重新进行组件渲染）

state 操作　　

　　初始化状态　

constructor(props){

    super(props)

    this.state = { //this是一个组件对象

        stateProp1: value1,

        stateProp2: value2

    }

}

　　　

　　读取某个状态值

this.state.statePropertyName

　　

　　更新状态，组件界面更新

this.setState({

    stateProp1: value1,

    stateProp2: value2

})

state属性示例–监听点击事件，然后状态改变

定义组件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="test"></div>

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

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

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

    <script type="text/babel">

       class Myname extends React.Component {

        constructor (props) {

                //调用父类的构造函数

                super(props)

                //1、初始化状态——固定写法

                this.state = {

                    isMyname: true

                  }

                //[注意]将新增的方法中的this强制绑定为组件对象_bind()方法产生一个与handleClick()一样的方法

                this.change = this.change.bind(this)

            }

            //新增自定义方法:内部的this默认不是组件对象，而是undefined

            change () {

                //3、更新状态，需要让this指向组件对象

               this.setState({

                isMyname: !this.state.isMyname

              })

            }

            //重写组件类方法

            render () {

                const text = this.state.isMyname ? '我是ImagineCode' : '哈哈哈'

                return <h2 onClick={this.change}>{text}</h2>

              }

        }

        ReactDOM.render(<Myname />, document.getElementById('test'))

    </script>

</body>

</html>

props 属性

作用：复用

案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="test1"></div>

    <div id="test2"></div>

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

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

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

    <script src="../js/prop-types.js"></script>

    <script type="text/babel">

    //    1、定义组件:方式1

    function Person(props) {

        return (

            <ul>

                <li>name：{props.name}</li>

                <li>age：{props.age}</li>

                <li>sex：{props.sex}</li>

            </ul>

        )

    }

    //方式2：使用类方式定义组件（运行时请将其中一个方式注释）

    class Person extends React.Component {

        render() {

            return (

                <ul>

                <li>name：{this.props.name}</li>

                <li>age：{this.props.age}</li>

                <li>sex：{this.props.sex}</li>

            </ul>

            )

        }

    }

    //指定默认值

    Person.defaultProps = {

        name:'imaginecode',

        age: 17,

        sex:'woman'

    }

    //指定属性值的类型和必要性--使用prop-types.js库

    Person.propTypes = {

        name:PropTypes.string.isRequired,

        age:PropTypes.number.isRequired,

    }

    // 2、渲染组件标签

    const p1 = {

        name:'imaginecode',

        age: 19,

        sex:'man'

    }

    ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex} />,document.getElementById('test1'));

    const p2 = {

        name:'imaginecode2'

    }

    ReactDOM.render(<Person name={p2.name}/>,document.getElementById('test2'));

    </script>

</body>

</html>

　　为组件指定默认属性值，组件属性defaultProps：

Person.defaultProps = {name:''}

　　

　　对props中的属性值进行类型限制和必要性限制,组件属性propTypes：

Person.propTypes = {

    name:PropTypes.string.isRequired,

    age:PropTypes.number.isRequired

}

　

refs 属性

（1）ref用于标识组件内部某个元素

（2）refs 是标识集合

　示例　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="text1"></div>

    <div id="text2"></div>

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

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

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

    <script src="../js/prop-types.js"></script>

    <script type="text/babel">

        //1、先定义组件

        class InputComp extends React.Component {

            constructor(props) {

                super(props)

                //先对自定义函数进行bind操作

                this.showInput = this.showInput.bind(this);

                this.handleBlur = this.handleBlur.bind(this);

            }

            showInput(event) {

                console.log(this);

                alert(this.inputVal.value);

            }

            handleBlur(event) {//利用所有的事件均有一个event属性

                alert(event.target.value);

            }

            render() {

                return(

                    //this.inputVal=input 将当前input绑定到组件对象上。input代表当前这个input元素

                    <div>

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

                        <button onClick={this.showInput}>点击获取值</button>

                        <input type="text" placeholder="失去焦点提示内容" onBlur={this.handleBlur}/>

                    </div>

                )

            }

        }

        //2、渲染组件标签

        ReactDOM.render(<InputComp />,document.getElementById('text1'));

    </script>

</body>

</html>

react的三大属性的更多相关文章

  1. React组件三大属性之 refs

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

  2. React组件三大属性之 props

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

  3. React组件三大属性之state

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

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

    React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...

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

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

  6. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  7. JS中Array数组的三大属性用法

    原文:JS中Array数组的三大属性用法 Array数组主要有3大属性,它们分别是length属性.prototype属性和constructor属性. JS操作Array数组的方法及属性 本文总结了 ...

  8. React组件的属性

    组件的三大属性 state props refs 写组件的要求: 1>组件必须大写 2>组件必须只有一个根元素 state是组件的重要对象 值可以是对象 组件被称之为 状态机 通过跟新组件 ...

  9. React Native声明属性和属性确认

    属性声明 因为用React Native创建的自定义组件可以复用, 我们开发过程中可能一个项目组有多个人同时开发,其他同事可能会用到我们自定义的组件, 但是他们使用的时候很容易忘记使用某些属性,这时候 ...

随机推荐

  1. mybaties longtext 类型不能映射到自动生成的文件

    假设数据库里有 fun_detail 这样一个字段. 使用 MyBatis Generator 生成的 XXExample 文件,发现没有 fun_detail 这个字段. 需要加一行: <co ...

  2. not full 和 default

    create table t16( id int, name char(6), sex enum('male','female') not null default 'male'); insert i ...

  3. xsos：一个在Linux上阅读SOSReport的工具

    xsos:一个在Linux上阅读SOSReport的工具 时间 2019-05-23 14:36:29  51CTO 原文  http://os.51cto.com/art/201905/596889 ...

  4. 关于jmeter线程组和循环次数的设置

    初始设置:设置线程数 n = 80,循环次数a = 1,ramp-up period=5 一 计算最后一个线程的生成时间(last) 总共生成80个线程,总共需要5秒,每秒钟会启动16个线程,所以,第 ...

  5. Installing SFTP/SSH Server on Windows using OpenSSH

    Installing SFTP/SSH Server 1. On Windows 10 version 1803 and newer In Settings app, go to Apps > ...

  6. Microk8s 安装helm3

    Microk8s 安装helm3 原本使用官方的命令时这样的.但是使用的是官方的源,网络极不稳定.就出现了下面的状况.解决方法是更改为国内的源. microk8s enable helm3 curl: ...

  7. 012.Kubernetes的configmap和secret配置

    使用configmap对多有的配置文件进行统一管理 一 configmap配置管理 1.1 检查mysql的配置 [root@docker-server1 storage]# kubectl get ...

  8. Python应用与实践-转自（吴秦（Tyler））

    1.      Python是什么? 1.1.      Python语言 1.2.      Python哲学 2.      Python在工作中的应用 2.1.      实例1:文件批量处理 ...

  9. git OpenSSL SSL_connect问题

    遇到这个问题,查找别人也遇到,省时间不写了直接复制 在使用Git来克隆仓库报了错误,如下: fatal: unable to access 'https://github.com/xingbuxing ...

  10. PTH的几种食用姿势

    PTH PTH(pass the hash)也叫做hash传递.在内网渗透中是一种很经典的攻击方式,原理就是攻击者可以直接通过NTLM Hash(mimikatz或其他手段抓取到的密码hash)访问远 ...