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

组件的三大属性state

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

初始化指定

constructor() {
    super()
    this.state = {
        stateName1 : stateValue1,
        stateName2 : stateValue2
    }
}

读取显示

this.state.stateName1

更新状态-->更新界面(自动更新)

this.setState({stateName1 : newValue})

需求：自定义组件, 功能说明如下：

显示h2标题, 初始文本为: 你喜欢我，点击标题更新为: 我喜欢你

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>07_component_state</title>
</head>
<body>
<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
  /*
  需求: 自定义组件, 功能说明如下
    1. 显示h2标题, 初始文本为: 你喜欢我
    2. 点击标题更新为: 我喜欢你
  */
  // 1.定义组件
  class Like extends React.Component {
    constructor(props) { // 初始化状态
      super(props)
      this.state = {
        isLikeMe : false
      }

      // 将新增的方法的this强制绑定为组件对象
      this.handleClick = this.handleClick.bind(this) //
    }
    // 这个是重写组件内的方法，所以this代表的是组件对象
    render () {
      // 读取状态，最终要得到isLikeMe的值
      // const isLikeMe = this.state.isLikeMe // 正常写法
      const {isLikeMe} = this.state // 解构赋值的写法（es6的语法）
      return <h2 onClick={this.handleClick}>{isLikeMe?'你喜欢我' : '我喜欢你'}</h2>
    }

    // 新添加的方法，内部的this默认不是组件对象，而是undefined
    handleClick () {
      const isLikeMe = !this.state.isLikeMe
      // 更新状态
      this.setState({isLikeMe})
    }
  }

  // 2.渲染组件
  ReactDOM.render(<Like/>, document.getElementById('example'))
</script>
</body>
</html>

组件的三大属性props

每个组件对象都会有props(properties的简写)属性，组件标签的所有属性都保存在props中，所有组件标签的属性的集合对象

作用：通过标签属性从组件外向组件内传递变化的数据，注意: 组件内部不要修改props数据

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>04_component_props</title>
</head>
<body>

<div id="example1"></div>
<div id="example2"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
  // 1.定义组件
  function Person(props) {
    return (
      <ul>
        <li>姓名：{props.name}</li>
        <li>年龄：{props.age}</li>
        <li>性别：{props.sex}</li>
      </ul>
    )
  }

  // 2.渲染组件标签
  const p1 = {
    name: 'lina',
    age: 18,
    sex: '女'
  }
  ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>, document.getElementById('example1'))
</script>
</body>
</html>

内部读取某个属性值

对props中的属性值进行类型限制和必要性限制，使用比较新的react版本，需要引入prop-types.js这个文件

// 对props中的属性值进行类型限制和必要性限制
  Person.propTypes = {
    name: PropTypes.string.isRequired, // name属性的值必须是字符串并且必须要传，如果有默认值就不会报错
    age: PropTypes.number.isRequired
  }

扩展属性: 将对象的所有属性通过props传递

// ...的作用：一种是打包（就是将一组数据打包到一起），一种是解包（）
  ReactDOM.render(<Person {...p1}/>, document.getElementById('example1'))

默认属性值

// 指定属性的默认值
  Person.defaultProps = {
    age: 18,
    sex: '男'
  }

组件类的构造函数

class Person extends React.Component {
    render () {
      return (
        <ul>
          <li>姓名：{this.props.name}</li>
          <li>年龄：{this.props.age}</li>
          <li>性别：{this.props.sex}</li>
        </ul>
      )
    }
  }

需求: 自定义用来显示一个人员信息的组件
1). 如果性别没有指定, 默认为男
2). 如果年龄没有指定, 默认为18

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>04_component_props</title>
</head>
<body>

<div id="example1"></div>
<div id="example2"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
  // 1.定义组件
//  function Person(props) {
//    return (
//      <ul>
//        <li>姓名：{props.name}</li>
//        <li>年龄：{props.age}</li>
//        <li>性别：{props.sex}</li>
//      </ul>
//    )
//  }

  class Person extends React.Component {
    render () {
      return (
        <ul>
          <li>姓名：{this.props.name}</li>
          <li>年龄：{this.props.age}</li>
          <li>性别：{this.props.sex}</li>
        </ul>
      )
    }
  }

  // 指定属性的默认值
  Person.defaultProps = {
    age: 18,
    sex: '男'
  }

  // 对props中的属性值进行类型限制和必要性限制
  Person.propTypes = {
    name: PropTypes.string.isRequired, // name属性的值必须是字符串并且必须要传
    age: PropTypes.number.isRequired
  }

  // 2.渲染组件标签
  const p1 = {
    name: 'lina',
    age: 18,
    sex: '女'
  }
  const p2 = {
    name: 'jack',
    age: 13,
    sex: '男'
  }

  // ...的作用：一种是打包（就是将一组数据打包到一起），一种是解包（）
  ReactDOM.render(<Person {...p1}/>, document.getElementById('example1'))
  ReactDOM.render(<Person name={p2.name} age={p2.age}/>, document.getElementById('example2'))
</script>
</body>
</html>

组件的三大属性refs

通过ref获取组件内容特定标签对象, 进行读取其相关数据

<input type="text" ref="content"/> // 绑定ref

const input = this.refs.content  // 获取ref

上面这个写法官方不建议这么写，可以使用下面这种，回调函数在组件初始化渲染完或卸载时自动调用，在组件中可以通过this.msgInput来得到对应的真实DOM元素

<input type="text" ref={input => this.msgInput = input}/> // 绑定ref

alert(this.msgInput.value) // 获取ref

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>07_component_refs</title>
</head>
<body>
<br>
  <div id="example"></div>

  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
    /*
    需求: 自定义组件, 功能说明如下:
      1. 界面如果页面所示
      2. 点击按钮, 提示第一个输入框中的值
   */

    // 1. 定义组件
    class Mycomponent extends React.Component {
      constructor (props) {
        super (props)
        this.showInput = this.showInput.bind(this)
      }
      showInput () {
        alert(this.msgInput.value)
      }

      render () {
        return (
          <div>
            <input type="text" ref={input => this.msgInput = input}/>&nbsp;
            <button onClick={this.showInput}>提示输入</button>&nbsp;
          </div>
        )
      }
    }

    // 2. 渲染组件标签
    ReactDOM.render(<Mycomponent/>, document.getElementById('example'))
  </script>
</body>
</html>

组件中的事件处理

通过onXxx属性指定组件的事件处理函数(注意大小写)

React使用的是自定义(合成)事件, 而不是使用的原生DOM事件，React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)

onXxx={this.eventHandler}

在组件中添加事件处理方法，通过event.target得到发生事件的DOM元素对象

eventHandler(event) {}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>07_component_refs</title>
</head>
<body>
<br>
  <div id="example"></div>

  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
    // 1. 定义组件
    class Mycomponent extends React.Component {
      constructor (props) {
        super (props)
        this.handleBlur = this.handleBlur.bind(this)
      }

      handleBlur (event) {
        alert (event.target.value)
      }

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

    // 2. 渲染组件标签
    ReactDOM.render(<Mycomponent/>, document.getElementById('example'))
  </script>
</body>
</html>

组件的三大属性state，props，refs与事件处理的更多相关文章

React 三大属性state,props,refs以及组件嵌套的应用
React 三大属性state,props,refs以及组件嵌套的应用该项目实现了一个简单的表单输入添加列表的内容代码如下 <!DOCTYPE html> <html> & ...
React组件三大属性之 props
React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中作用1) 通过标签属性从组件外向组件内传递变 ...
React基础篇（2） -- state&props&refs
内容简介 state props refs 行内样式及动态类名 state 基本介绍 React 把组件看成是一个状态机(State Machines).通过与用户的交互,实现不同状态,然后渲染 UI ...
【React】react学习笔记03-React组件对象的三大属性-state
今天晚上学习了React中state的使用,特做此记录,对于学习的方式,博主仍然推荐直接复制完整代码,对着注释观察现象!: 上文中,我列举了两种React自定义组件的声明,这里我拿方式二进行举例: / ...
react的三大属性
react的三大属性 state props refs props 来自外部属性 states 来自内部状态 refs 用于表示组件内某个元素 state基础(最重要的属性) state是组件对象最 ...
React组件三大属性之 refs
React组件三大属性之 refs refs属性 1) 组件内的标签都可以定义ref属性来标识自己 a. <input type="text" ref={input => ...
React组件三大属性之state
React组件三大属性之state 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示理解1) state是组件对象最重要的属性, 值是对象(可以包含多个数 ...
React Native组件、生命周期及属性传值props详解
创建组件的三种方式第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...
从 0 到 1 实现 React 系列 —— 2.组件和 state|props
看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

随机推荐

github总结(1)--怎样创建一个新的仓库
第一步:登录账号,进入github,创建一个新的空仓库第二步:打开电脑上已经安装好的git-bash,切换至项目所在本地目录第三步:创建本地仓库及提交文件到本地仓库(用windows命令行或者gi ...
百度编辑器 UEditor setContent()
给编辑器赋值的代码: var ue = UE.getEditor('content'); ue.ready(function (){ ue.setContent(data.data.cont ...
ASP.NET MVC5 + EF6 + LayUI实战教程，通用后台管理系统框架（3）
前言本节将我们自己的CSS样式替换系统自带的开始搭建将脚本文件夹删掉,将内容文件夹里的内容删掉,将我们自己的CSS样式文件,全部复制到内容里边新建家庭控制器给家庭控制器添加索引视图指数代码 ...
C# GDI+编程之绘图
在了解绘图之前,我们先讲几个预备知识一.坐标系坐标系是图形设计的基础.GDI+使用三个坐标空间:世界.页面和设备,其中,世界坐标是用于建立特殊图形世界模型的坐标系,也是在.NET Framewor ...
MySQL 事务机制
事务处理是保证数据安全的重要机制,事务有四个重要属性 ,根据它们的英文名称可以记为ACID: 原子性(Atomic): 事务操作是不可分割的; 事务只存在已执行和未执行两种状态,不存在只执行了部分指令 ...
HAProxy（三）：Keeplived+HAProxy搭建高可用负载均衡动静分离架构基础配置示例
一.安装环境 1.软件版本 HAProxy:1.5.18 Keepalived:1.3.5 Nginx:1.12.2 PHP:7.2 系统版本:CentOS 7.4 2.IP分配与架构图 3.安装软件 ...
Spring JDBCTemplate连接SQL Server之初体验
前言在没有任何框架的帮助下我们操作数据库都是用jdbc,耗时耗力,那么有了Spring,我们则不用重复造轮子了,先来试试Spring JDBC增删改查,其中关键就是构造JdbcTemplate类. ...
浅谈MemCahe
MemCahe 首先介绍下memcahce的定义:是一个分布式的高速缓存系统,目前被许多网站使用以提升网站的访问速度,尤其对于一些大型的.需要频繁访问数据库的网站访问速度提升效果十分显著. 接下来介绍 ...
java_有秒计时的数字时钟
题目内容: 这一周的编程题是需要你在课程所给的时钟程序的基础上修改而成.但是我们并不直接给你时钟程序的代码,请根据视频自己输入时钟程序的Display和Clock类的代码,然后来做这个题目. 我们需要 ...
Python 3.4:Chromedrive,IEDriverServer,geckoDriver
import sys; import time; import os; #from huoche import PythonTickt; from splinter.browser import Br ...

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

组件的三大属性state，props，refs与事件处理的更多相关文章

随机推荐

热门专题