React学习 - 三.属性与事件

state 属性（管理组件内部的属性状态）

state 属性只作用于当前的组件内，不会污染到其他组件
同时 state 属性的更新，会经过虚拟 DOM 直接热加载到页面，而不需要额外的刷新，这就使得类似实时聊天这类功能的实现变得很有效率。

B0799379-94D6-4A7F-A6F9-E34800A79E20.png

例子：

import React from 'react';
import ReactDOM from 'react-dom';

export default class BodyIndex extends React.Component{

  constructor(){
    super();
    this.state = {
      username : "Emilesu",
      age : 30
    }
  }

  render(){
    setTimeout(() => {
      this.setState({
        username : "Yuner",
        age : 3
      })
    }, 4000);

    return (
      <div>
        <h2>这里是主体内容</h2>
        <p>{this.state.username} {this.state.age}</p>
      </div>
    );
  }
}

• 先通过构造函数的方式引入 state 属性

constructor(){
  super();
  this.state = {
    //这是放入 state 属性
  }
}

• 更改 state 属性通过setState()方法

this.state({
  //这里放入 state 更改后的属性
})

• 在组件内引用 state 属性

{this.state.username} {this.state.age}

---

props属性（父页面向子页面传入的属性状态）

props属性可以接受其他组件传递来的属性
例子：

//其他组件传递参数
return (
  <BodyIndex userid={123456} usercolor={'red'} />
);

![Uploading F58ABD32-5189-4000-914C-7C129CF3B32A_012853.png . . .]

//在模块中接收这个参数
return (
  {this.props.userid} {this.props.usercolor}
);

F58ABD32-5189-4000-914C-7C129CF3B32A.png

---

事件与数据的双向绑定

• ES6里面的事件绑定方法，要加上 bind

<input type = "button" value = "提交" onClick = {this.changeUserInfo.bind(this, 99)} />

• 子页面向父页面传递参数的方法
  在子页面中通过调用父页面传递过来的事件 props 进行组件间的参数传递
  主要是在子页面中绑定 onChange 事件

import React from "react";

export default class BodyChild extends React.Component{

  render(){
    return(
      <div>
        <p>在子页面输入: <input type = "text" onChange={this.props.handleChildValueChange}/></p>    #子页面向父页面回传表单参数
      </div>
    )
  }
}

import React from 'react';
import BodyChild from './bodychild';

export default class BodyIndex extends React.Component{

  constructor(){
    super();
    this.state = {
      username : "Emilesu",
      age : 30
    }
  }

  changeUserInfo(age){
    this.setState({
      age : age
    })
  }

  handleChildValueChange(event){          #定义的事件方法
    this.setState({
      age : event.target.value
    })
  }

  render(){
    return (
      <div>
        <h2>这里是主体内容</h2>
        <p>{this.props.userid} {this.props.usercolor}</p>
        <p>{this.state.username} {this.state.age}</p>
        <input type = "button" value = "提交" onClick = {this.changeUserInfo.bind(this, 99)} />
        <BodyChild handleChildValueChange={this.handleChildValueChange.bind(this)}/>    #父页面向子页面传递事件
      </div>
    );
  }
}

text1.gif

---

可复用组件

• 默认属性的使用方法
  在const defaultUserName = {}里面定义默认属性
  最后通过BodyIndex.defaultProps = defaultUserName把默认属性赋给组件

import React from 'react';
import BodyChild from './bodychild';

const defaultUserName = {
    username: '这是一个默认的用户名'
};

export default class BodyIndex extends React.Component{

  constructor(){
    super();
    this.state = {
      username : "Emilesu",
      age : 30
    }
  }

  changeUserInfo(age){
    this.setState({
      age : age
    })
  }

  handleChildValueChange(event){
    this.setState({
      age : event.target.value
    })
  }

  render(){
    return (
      <div>
        <h2>这里是主体内容</h2>
        <p>接收到的父页面参数：userid: {this.props.userid}  username: {this.props.username}</p>
        <p>{this.state.username} {this.state.age}</p>
        <input type = "button" value = "提交" onClick = {this.changeUserInfo.bind(this, 99)} />
        <BodyChild {...this.props} id={4} handleChildValueChange={this.handleChildValueChange.bind(this)}/>
      </div>
    )
  }
}

BodyIndex.defaultProps = defaultUserName;

• 父页面往孙页面传参的方法
  ...this.props可以承接父页面的所有属性参数

< Component {...this.props}/>

• 关于验证器的使用
  （实做时候报错，应该是 webpack 打包导致的原因，暂未解决）

---

组件的 Refs 属性

Refs用于访问组件内 HTML 元素的 DOM 节点，是唯一可靠的方法
在 React 中访问 DOM 元素的两种方法比较，例子：

import React from 'react';
import ReactDOM from 'react-dom';

export default class BodyIndex extends React.Component{
    // 控制HTML元素的第一种方法 纯 js 写法
    var mySubmitButton = document.getElementById('submitButton');
    console.log(mySubmitButton);
    ReactDOM.findDOMNode(mySubmitButton).style.color = "red";

    // 控制HTML元素的第二种方法 使用 refs 属性
    console.log(this.refs.submitButton);
    this.refs.submitButton.style.color = "red";
  }

render(){
    return (
      <input type = "button" id = "submitButton" ref = "submitButton" value = "提交" onClick = {this.changeUserInfo.bind(this)} />
    )
  }
}

• 第一种是使用原生的 JS 写法，从 HTML 标签的id来访问 DOM 元素，并通过ReactDOM.findDOMNode()方法来操作 DOM 元素。
• 第二种方法是在 HTML 标签绑定 ref节点，然后使用this.refs.refName来访问和操作 DOM

---