React 基础2

1. 图片路径的引入import imginfo from '../assets/image/my_2.png';
<img src={imginfo} alt=""/>
   src使用es5里面的require
   <img src={require('../assets/image/my_2.png')} alt=""/>
2. 修改事件 this指针

	function handle(){ //1.直接这样获取 this的指针不同}
	onClick={this.handle.bind(this)} 
	//2.直接调用
	constryctor(){this.handle=this.handle.bind(this)}
	//3.直接调用
	function handle=()=>{ //箭头函数获取 不改变this指针}

3. 修改this.state里面的数据 setState

    setName=(str)=>{
        this.setState({ //修改数据使用setState方法
            username:"username修改之后的值"  
        });
    }
 {/* 调用方法传参 */}
<button onClick={this.setName.bind(this,"张三")}>调用方法传值</button>

4. ref获取dom元素节点
   1） 先给元素设置ref="username"
   2） 在去直接写this.refs.username.value

<li>姓名：<input ref="username" type="text" 
value={this.state.name} onChange={this.setName}/></li>

    //设置姓名的方法
    setName=(e)=>{
       this.setState({  // name:e.target.value      
        name:this.refs.username.value 
       });
    }

5. 表单元素事件----实现数据双向

• 限制性约束 （value（通过react实现mv 方式绑定的值））
  实现数据双向 input内容改变onChange={this.valChange}，赋给state里面变量 this.setstate{} 异步设置 input value={this.state.msg}
• 非限制性约束（defaultvalue 相当于原生的value）

 <li>城市：
      <select value={this.state.city} onChange={this.setCity}>
       {
        this.state.citys.map(function (value,key){
        	return <option  key={key}>{value}</option>
         	})
       }
       </select>
</li>
    constructor(){
        super();
        this.state={
            city:"",
            citys:[
                "宝鸡",
                "西安",
                "延安"
            ]}
 }
    //设置下拉菜单的值
    setCity=(e)=>{
        this.setState({
            city:e.target.value
        });
    }

6. todolist（待办事项列表）
7. storge缓存模块
   封装的模块 Storage.js

//自定义模块的封装
let Storage={
    setStorage(key,value){
        localStorage.setItem(key,JSON.stringify(value));
    },
    getStorage(key){
        return JSON.parse(localStorage.getItem(key));
    },
    removeStorage(key){
        localStorage.removeItem(key);
    }
}
//模块暴露
export default Storage;

组件调用使用 Storage.js

import Storage from '../model/Storage.js'

//添加数据的时候  写入缓存
Storage.setStorage("todolist",now);

8. 组件传值 props

• 父组件给子组件传值（props）：可以传值，传方法，传整个组件
  父组件里面挂载子组件<Child dataname={this.state.name} getmethod={this.getData}></Child>
  子组件调用<p> {this.props.dataname}</p>
• 父组件中通过refs获取子组件 属性和方法
  子组件添加属性ref 在父组件里面直接this.refs.name 可以拿到子组

//父组件
componentDidMount(){
    let childname=this.refs.header.state.name;
    alert(childname);
  } 
 <Child ref="header" dataname={this.state.name} getmethod={this.getData}></Child>

• 父组件给子组件传值约束传值 子组件使用
  defaultProps:父组件调用子组件不传值，子组件可以使用defaultProps定义默认值；
  propTypes:验证传值的合法性；

//子组件
	//先导入'prop-types'
import PropTypes from 'prop-types';
	//定义传值的默认
Header.defaultProps={
    dataname:"默认"
}
	//约束传值的类型
Header.propTypes={
    dataname:PropTypes.string,
    numinfo:PropTypes.number,
    datalist:PropTypes.bool
}

• 子组件给父组件传值

//父组件
 getData=(msg)=>{//从子组件 获取数据
    alert(msg);  
  }
 <Child dataname={this.state.name} getmethod={this.getData}></Child>

//子组件
    //声明周期加载函数
    componentDidMount(){        
        this.props.getmethod(this.state.name);传递 子组件数据
    }

非父子传值 emit on

reactnative