React

事件对象:　

import React,{Component} from 'react'

class Index extends Component{
    constructor(props){
        super(props)
        this.state = {
            msg:'张学友'
        }
    }
    getMsg=(event)=>{
        alert(this.state.msg);

　　　　event.target.value;//获取值
　　　　let val = this.refs.username.value //根据ref获值

　　　　console.log(event.target); //获取当前Dom节点 event.target.style.background = 'red' ; //改变当前Dom的背景色
　　　　　　
        console.log(event.target.getAttribute('aid')); //获取当前Dom属性

    }
    setMsg=()=>{
        this.setState({
            msg:'刘德华'
        })
    }
    render(){
        return(
            <div>
                {this.state.msg}
                <button ref="username" aid='1111' onClick={this.getMsg}>点击获值</button>
                <br />
                <button onClick={this.setMsg}>改变值</button>
            </div>
        )
    }
}
export default Index

　2.父子组件传值

　　父组件可以传属性 方法给子组件,还可以本整个父组件传给子组件

　　父组件代码:

　　

setv=(result)=>{
        this.setState({
            msg:result
            
        })
        alert(result)
    }
    render(){
        return(
            <div>
                {this.state.msg}
                <button aid='1111' onClick={this.getMsg}>点击获值</button>
                <br />
                <button onClick={this.setMsg}>改变值</button>
                <br />
                <hr></hr>
                <Son title='父组件定义的标题' setv={this.setv} news={this} />
            </div>
        )
    }

　　子组件代码

render(){
        return(
            <div>
                <p>{this.state.title}</p>
                <button onClick={this.props.news.setv.bind(this,'这是子组件传过来的')}>给父组件传值</button>
                <button onClick={this.props.news.getRun}>执行父组件的方法</button>
            </div>
        )
    }

　　父组件获取子组件的值

 getSonTitle=()=>{
        alert(this.refs.son.state.title);
    }
    render(){
        return(
            <div>
                {this.state.msg}
                <button aid='1111' onClick={this.getMsg}>点击获值</button>
                <br />
                <button onClick={this.setMsg} >改变值</button>
                <br />
                <hr></hr>
                <Son title='父组件定义的标题' setv={this.setv} news={this} ref='son' />
                <br />
                <hr></hr>
               
                <button onClick={this.getSonTitle}>获取子组件的值</button>
            </div>
        )
    }

　　4.默认属性

　　

Son.defaultProps={
    title:'默认标题'
}
//验证传值的类型
import PropTypes from 'prop-types'
Son.propTypes={
    title:PropTypes.string
}